<html lang="zh-CN"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>益泽供应链-司机评分系统</title>
    <!-- Tailwind CSS v3 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <!-- 统一的 Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1976D2',
                        secondary: '#64B5F6',
                        success: '#4CAF50',
                        danger: '#F44336',
                        warning: '#FFC107',
                        info: '#2196F3',
                        light: '#F5F5F5',
                        dark: '#333333'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .transition-all {
                transition-property: all;
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                transition-duration: 150ms;
            }
            .shadow {
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            }
            .shadow-lg {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }
            .star-filled {
                color: #FFC107;
            }
            .star-empty {
                color: #E0E0E0;
            }
            .modal {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5);
                z-index: 1000;
                overflow: auto;
            }
            .modal-content {
                background-color: white;
                margin: 10% auto;
                padding: 20px;
                border-radius: 5px;
                width: 80%;
                max-width: 600px;
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
                animation: modalFadeIn 0.3s;
            }
            @keyframes modalFadeIn {
                from {opacity: 0; transform: translateY(-50px);}
                to {opacity: 1; transform: translateY(0);}
            }
            .loading {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(255, 255, 255, 0.8);
                z-index: 2000;
                justify-content: center;
                align-items: center;
            }
            .loading-spinner {
                border: 5px solid #f3f3f3;
                border-top: 5px solid #1976D2;
                border-radius: 50%;
                width: 50px;
                height: 50px;
                animation: spin 1s linear infinite;
            }
            @keyframes spin {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }
            .notification {
                position: fixed;
                top: 20px;
                right: 20px;
                padding: 15px 20px;
                border-radius: 5px;
                color: white;
                z-index: 3000;
                opacity: 0;
                transform: translateX(100%);
                transition: all 0.3s ease;
                box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
            }
            .notification.show {
                opacity: 1;
                transform: translateX(0);
            }
            .notification.info {
                background-color: #2196F3;
            }
            .notification.success {
                background-color: #4CAF50;
            }
            .notification.error {
                background-color: #F44336;
            }
            .notification.warning {
                background-color: #FFC107;
            }
            .dashboard-card {
                border-radius: 8px;
                padding: 20px;
                margin-bottom: 20px;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                transition: transform 0.3s ease;
            }
            .dashboard-card:hover {
                transform: translateY(-5px);
            }
            .nav-item {
                padding: 10px 15px;
                border-radius: 4px;
                cursor: pointer;
                transition: all 0.2s ease;
            }
            .nav-item:hover {
                background-color: rgba(255, 255, 255, 0.1);
            }
            .nav-item.active {
                background-color: rgba(255, 255, 255, 0.2);
                font-weight: bold;
            }
            .form-group {
                margin-bottom: 15px;
            }
            .form-label {
                display: block;
                margin-bottom: 5px;
                font-weight: 500;
            }
            .form-control {
                width: 100%;
                padding: 8px 12px;
                border: 1px solid #ddd;
                border-radius: 4px;
                box-sizing: border-box;
                transition: border-color 0.2s ease;
            }
            .form-control:focus {
                border-color: #1976D2;
                outline: none;
                box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
            }
            .btn {
                display: inline-block;
                padding: 8px 16px;
                margin-bottom: 0;
                font-size: 14px;
                font-weight: 400;
                line-height: 1.42857143;
                text-align: center;
                white-space: nowrap;
                vertical-align: middle;
                cursor: pointer;
                background-image: none;
                border: 1px solid transparent;
                border-radius: 4px;
                transition: all 0.2s ease;
            }
            .btn-primary {
                color: #fff;
                background-color: #1976D2;
                border-color: #1976D2;
            }
            .btn-primary:hover {
                background-color: #1565C0;
                border-color: #1565C0;
            }
            .btn-success {
                color: #fff;
                background-color: #4CAF50;
                border-color: #4CAF50;
            }
            .btn-success:hover {
                background-color: #388E3C;
                border-color: #388E3C;
            }
            .btn-danger {
                color: #fff;
                background-color: #F44336;
                border-color: #F44336;
            }
            .btn-danger:hover {
                background-color: #D32F2F;
                border-color: #D32F2F;
            }
            .btn-warning {
                color: #fff;
                background-color: #FFC107;
                border-color: #FFC107;
            }
            .btn-warning:hover {
                background-color: #FFA000;
                border-color: #FFA000;
            }
            .btn-outline {
                color: #1976D2;
                background-color: transparent;
                border-color: #1976D2;
            }
            .btn-outline:hover {
                color: #fff;
                background-color: #1976D2;
            }
            .table {
                width: 100%;
                max-width: 100%;
                margin-bottom: 20px;
                border-collapse: collapse;
            }
            .table th,
            .table td {
                padding: 12px;
                text-align: left;
                border-bottom: 1px solid #ddd;
            }
            .table th {
                background-color: #f5f5f5;
                font-weight: 500;
            }
            .table tr:hover {
                background-color: #f9f9f9;
            }
            .badge {
                display: inline-block;
                padding: 3px 7px;
                font-size: 12px;
                font-weight: 500;
                line-height: 1;
                color: #fff;
                text-align: center;
                white-space: nowrap;
                vertical-align: baseline;
                border-radius: 10px;
            }
            .badge-success {
                background-color: #4CAF50;
            }
            .badge-warning {
                background-color: #FFC107;
            }
            .badge-danger {
                background-color: #F44336;
            }
            .badge-info {
                background-color: #2196F3;
            }
            .avatar {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                object-fit: cover;
            }
            .avatar-lg {
                width: 80px;
                height: 80px;
            }
            .tab {
                display: none;
            }
            .tab.active {
                display: block;
                animation: tabFadeIn 0.3s;
            }
            @keyframes tabFadeIn {
                from {opacity: 0;}
                to {opacity: 1;}
            }
            .login-container {
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 100vh;
                background-color: #f5f5f5;
            }
            .login-card {
                width: 100%;
                max-width: 400px;
                padding: 20px;
                background-color: white;
                border-radius: 8px;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            }
            .logo-container {
                text-align: center;
                margin-bottom: 20px;
            }
            .logo {
                width: 80px;
                height: 80px;
                margin: 0 auto;
            }
            .app-title {
                margin-top: 10px;
                font-size: 24px;
                font-weight: 600;
                color: #1976D2;
            }
            .header {
                background-color: #1976D2;
                color: white;
                padding: 10px 20px;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .header-menu-btn {
                background: none;
                border: none;
                color: white;
                font-size: 20px;
                cursor: pointer;
                padding: 5px 10px;
                margin-right: 10px;
            }
            .header-logo {
                display: flex;
                align-items: center;
            }
            .header-logo img {
                width: 40px;
                height: 40px;
                margin-right: 10px;
            }
            .header-logo h1 {
                font-size: 18px;
                font-weight: 600;
            }
            .header-user {
                display: flex;
                align-items: center;
            }
            .header-user .avatar {
                margin-right: 10px;
            }
            .header-user .user-info {
                text-align: right;
            }
            .header-user .username {
                font-weight: 500;
            }
            .header-user .role {
                font-size: 12px;
                opacity: 0.8;
            }
            .header-user .logout-btn {
                margin-left: 15px;
                cursor: pointer;
                opacity: 0.8;
                transition: opacity 0.2s ease;
            }
            .header-user .logout-btn:hover {
                opacity: 1;
            }
            .sidebar {
                width: 220px;
                background-color: #263238;
                color: white;
                height: calc(100vh - 64px);
                overflow-y: auto;
                float: left;
            }
            .sidebar-menu {
                padding: 10px 0;
            }
            .sidebar-menu .menu-item {
                padding: 12px 20px;
                display: flex;
                align-items: center;
                cursor: pointer;
                transition: background-color 0.2s ease;
            }
            .sidebar-menu .menu-item:hover {
                background-color: rgba(255, 255, 255, 0.1);
            }
            .sidebar-menu .menu-item.active {
                background-color: rgba(25, 118, 210, 0.8);
                border-left: 4px solid #1976D2;
            }
            .sidebar-menu .menu-item i {
                margin-right: 10px;
                width: 20px;
                text-align: center;
            }
            .content {
                margin-left: 220px;
                padding: 20px;
                min-height: calc(100vh - 64px);
                background-color: #f5f5f5;
            }
            /* 响应式设计 */
            @media (max-width: 768px) {
                .sidebar {
                    width: 0;
                    position: fixed;
                    z-index: 1000;
                    overflow-x: hidden;
                    transition: 0.3s;
                }
                .sidebar.open {
                    width: 220px;
                }
                .content {
                    margin-left: 0;
                    padding: 10px;
                }
                .header-menu-btn {
                    display: block !important;
                }
                /* 移动端表格布局优化 */
                .table-drivers {
                    display: block;
                    width: 100%;
                    overflow-x: auto;
                }
                .table-drivers thead {
                    display: none;
                }
                .table-drivers tbody,
                .table-drivers tr,
                .table-drivers td {
                    display: block;
                    width: 100%;
                }
                .table-drivers tr {
                    margin-bottom: 15px;
                    border: 1px solid #ddd;
                    border-radius: 8px;
                    overflow: hidden;
                    padding: 10px;
                    display: flex;
                    flex-direction: column;
                }
                .table-drivers td {
                    text-align: right;
                    padding: 8px 10px;
                    position: relative;
                    border-bottom: 1px solid #f5f5f5;
                }
                /* 移动端头像居中样式 */
                .table-drivers td:first-child {
                    order: -1;
                    text-align: center;
                    padding: 15px 10px;
                    border-bottom: 1px dashed #eee;
                }
                .table-drivers td:first-child::before {
                    display: none;
                }
                .table-drivers td:first-child .avatar {
                    width: 80px;
                    height: 80px;
                    margin: 0 auto;
                }
                .table-drivers td:last-child {
                    border-bottom: none;
                    text-align: center;
                    padding-top: 15px;
                }
                .table-drivers td::before {
                    content: attr(data-label);
                    position: absolute;
                    left: 10px;
                    width: 45%;
                    padding-right: 10px;
                    font-weight: 500;
                    text-align: left;
                }
                /* 移动端操作按钮布局 */
                .table-drivers .action-buttons {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    gap: 5px;
                    margin-top: 10px;
                    padding-top: 10px;
                    border-top: 1px dashed #eee;
                }
                /* 移动端星星等比例缩小 */
                .table-drivers .rating-stars {
                    gap: 2px;
                }
                .table-drivers .rating-stars i {
                    font-size: 12px;
                }
                /* 编辑模式下的星星样式 */
                .table-drivers .editing-breathing-bg .rating-stars {
                    gap: 3px;
                }
                .table-drivers .editing-breathing-bg .rating-stars i {
                    font-size: 14px;
                }
                /* 移动端星星在本行内居中显示 */
                .table-drivers td[data-label="评分"] {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                }
                .table-drivers td[data-label="评分"]::before {
                    position: static;
                    width: 100%;
                    margin-bottom: 5px;
                    text-align: center;
                }
                .table-drivers td[data-label="评分"] .flex {
                    justify-content: center;
                    width: 100%;
                }
                /* 移动端其他表格样式 */
                .table-responsive {
                    overflow-x: auto;
                    -webkit-overflow-scrolling: touch;
                }
                .responsive-table {
                    width: 100%;
                    border-collapse: collapse;
                }
                .responsive-table th,
                .responsive-table td {
                    padding: 8px 12px;
                    text-align: left;
                    border-bottom: 1px solid #ddd;
                }
                .responsive-table th {
                    background-color: #f5f5f5;
                    font-weight: 500;
                }
                /* 小屏幕表格优化 */
                @media (max-width: 768px) {
                    .responsive-table th,
                    .responsive-table td {
                        padding: 6px 8px;
                        font-size: 12px;
                    }
                    /* 其他表格列宽调整 */
                    .table-rules th:nth-child(1), .table-rules td:nth-child(1) { width: 20%; } /* 名称 */
                    .table-rules th:nth-child(2), .table-rules td:nth-child(2) { width: 10%; } /* 分数 */
                    .table-rules th:nth-child(3), .table-rules td:nth-child(3) { width: 40%; } /* 描述 */
                    .table-rules th:nth-child(4), .table-rules td:nth-child(4) { width: 30%; } /* 操作 */
                    
                    .table-users th:nth-child(1), .table-users td:nth-child(1) { width: 20%; } /* 用户名 */
                    .table-users th:nth-child(2), .table-users td:nth-child(2) { width: 20%; } /* 姓名 */
                    .table-users th:nth-child(3), .table-users td:nth-child(3) { width: 20%; } /* 角色 */
                    .table-users th:nth-child(4), .table-users td:nth-child(4) { width: 40%; } /* 操作 */
                    
                    .table-records th:nth-child(1), .table-records td:nth-child(1) { width: 15%; } /* 司机 */
                    .table-records th:nth-child(2), .table-records td:nth-child(2) { width: 10%; } /* 类型 */
                    .table-records th:nth-child(3), .table-records td:nth-child(3) { width: 20%; } /* 条例 */
                    .table-records th:nth-child(4), .table-records td:nth-child(4) { width: 10%; } /* 分数 */
                    .table-records th:nth-child(5), .table-records td:nth-child(5) { width: 15%; } /* 操作人 */
                    .table-records th:nth-child(6), .table-records td:nth-child(6) { width: 15%; } /* 日期 */
                    .table-records th:nth-child(7), .table-records td:nth-child(7) { width: 15%; } /* 操作 */
                }
                .stat-container {
                    flex-direction: column;
                    gap: 10px;
                }
                .dashboard-card {
                    padding: 15px;
                }
                /* 收集模式响应式样式 */
                .collection-mode .grid-container {
                    grid-template-columns: repeat(2, 1fr);
                    gap: 10px;
                }
                .collection-mode .form-group {
                    margin-bottom: 12px;
                }
                .collection-mode .form-control {
                    padding: 7px 11px;
                    font-size: 13px;
                }
                .collection-mode .btn {
                    padding: 7px 14px;
                    font-size: 13px;
                }
                .collection-mode .table th,
                .collection-mode .table td {
                    padding: 10px;
                    font-size: 13px;
                }
            }
            @media (max-width: 480px) {
                .header-logo h1 {
                    font-size: 16px;
                }
                .page-title {
                    font-size: 18px;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 10px;
                }
                .card-header {
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 10px;
                }
                .action-btn {
                    padding: 4px 8px;
                    font-size: 11px;
                }
                .locked-permission {
                    padding: 2px 6px;
                    font-size: 10px;
                }
                /* 收集模式响应式样式 */
                .collection-mode .form-group {
                    margin-bottom: 10px;
                }
                .collection-mode .form-control {
                    padding: 6px 10px;
                    font-size: 12px;
                }
                .collection-mode .btn {
                    padding: 6px 12px;
                    font-size: 12px;
                }
                .collection-mode .table th,
                .collection-mode .table td {
                    padding: 8px;
                    font-size: 12px;
                }
                .collection-mode .grid-container {
                    grid-template-columns: 1fr;
                }
            }
            .page-title {
                margin-bottom: 20px;
                font-size: 20px;
                font-weight: 600;
                color: #333;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .card {
                background-color: white;
                border-radius: 8px;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                margin-bottom: 20px;
                overflow: hidden;
            }
            /* 收集模式通用样式 */
            .collection-mode {
                padding: 15px;
            }
            .collection-mode .card {
                margin-bottom: 15px;
            }
            .collection-mode .card-header {
                padding: 12px 15px;
            }
            .collection-mode .card-body {
                padding: 15px;
            }
            .collection-mode .grid-container {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 15px;
                margin-bottom: 15px;
            }
            .collection-mode .form-group {
                margin-bottom: 15px;
            }
            .collection-mode .form-label {
                font-size: 14px;
                margin-bottom: 4px;
            }
            .collection-mode .form-control {
                width: 100%;
                padding: 8px 12px;
                border: 1px solid #ddd;
                border-radius: 4px;
                box-sizing: border-box;
            }
            .collection-mode .btn {
                padding: 8px 16px;
                font-size: 14px;
            }
            .collection-mode .btn-group {
                display: flex;
                gap: 10px;
                margin-top: 15px;
            }
            .collection-mode .table-container {
                overflow-x: auto;
                margin-top: 15px;
            }
            .collection-mode .table {
                width: 100%;
                min-width: 600px;
            }
            .card-header {
                padding: 15px 20px;
                background-color: #f5f5f5;
                border-bottom: 1px solid #eee;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .card-header h2 {
                font-size: 16px;
                font-weight: 600;
                margin: 0;
            }
            .card-body {
                padding: 20px;
            }
            .action-buttons {
                display: flex;
                gap: 5px;
                align-items: center;
            }
            .action-btn {
                padding: 5px 10px;
                border-radius: 4px;
                cursor: pointer;
                font-size: 12px;
                transition: all 0.2s ease;
            }
            /* 移动端按钮样式优化 */
            @media (max-width: 768px) {
                .table-drivers .action-btn {
                    padding: 6px 12px;
                    font-size: 11px;
                    flex: 1;
                    min-width: 70px;
                    text-align: center;
                }
                .table-drivers .action-buttons {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    gap: 8px;
                    margin-top: 15px;
                    padding-top: 15px;
                }
                .table-drivers .locked-permission {
                    display: block;
                    margin-top: 8px;
                    text-align: center;
                    width: 100%;
                }
            }
            .action-btn.view {
                background-color: #2196F3;
                color: white;
            }
            .action-btn.edit {
                background-color: #4CAF50;
                color: white;
            }
            .action-btn.violation {
                background-color: #FF9800;
                color: white;
            }
            .action-btn.praise {
                background-color: #9C27B0;
                color: white;
            }
            .action-btn.delete {
                background-color: #F44336;
                color: white;
            }
            .locked-permission {
                padding: 3px 8px;
                background-color: #FFC107;
                color: #212529;
                border-radius: 4px;
                font-size: 12px;
                font-weight: bold;
                margin-left: 5px;
                border: 1px dashed #E0A800;
            }
            .action-btn:hover {
                opacity: 0.9;
                transform: translateY(-2px);
            }
            .chart-container {
                position: relative;
                height: 300px;
                margin-bottom: 20px;
            }
            .stat-container {
                display: flex;
                gap: 20px;
                margin-bottom: 20px;
            }
            .stat-card {
                flex: 1;
                background-color: white;
                border-radius: 8px;
                padding: 20px;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                text-align: center;
            }
            .stat-card .stat-value {
                font-size: 24px;
                font-weight: 600;
                margin: 10px 0;
            }
            .stat-card .stat-label {
                font-size: 14px;
                color: #666;
            }
            .rating-stars {
                display: flex;
                gap: 5px;
            }
            .rating-stars i {
                font-size: 18px;
            }
            .score-text {
                margin-right: 8px;
                font-weight: bold;
                color: #1e40af;
            }
            .violation-item {
                background-color: #FFF8E1;
                border-left: 4px solid #FFC107;
                padding: 10px 15px;
                margin-bottom: 10px;
                border-radius: 4px;
            }
            .praise-item {
                background-color: #E8F5E9;
                border-left: 4px solid #4CAF50;
                padding: 10px 15px;
                margin-bottom: 10px;
                border-radius: 4px;
            }
            .record-header {
                display: flex;
                justify-content: space-between;
                margin-bottom: 5px;
            }
            .record-title {
                font-weight: 500;
            }
            .record-score {
                font-weight: 600;
            }
            .record-description {
                font-size: 14px;
                color: #666;
            }
            .record-date {
                font-size: 12px;
                color: #999;
                margin-top: 5px;
            }
            .permission-group {
                margin-bottom: 15px;
            }
            .permission-group-title {
                font-weight: 500;
                margin-bottom: 5px;
            }
            .permission-list {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
            }
            .permission-item {
                display: flex;
                align-items: center;
                gap: 5px;
            }
            .driver-list {
                max-height: 300px;
                overflow-y: auto;
                border: 1px solid #eee;
                border-radius: 4px;
                padding: 10px;
            }
            .driver-item {
                display: flex;
                align-items: center;
                padding: 8px 0;
                border-bottom: 1px solid #eee;
            }
            .driver-item:last-child {
                border-bottom: none;
            }
            .driver-item input[type="checkbox"] {
                margin-right: 10px;
            }
            .driver-item .driver-info {
                flex: 1;
            }
            .driver-item .driver-name {
                font-weight: 500;
            }
            .driver-item .driver-score {
                font-size: 12px;
                color: #666;
            }
            .avatar-upload {
                position: relative;
                display: inline-block;
                margin-bottom: 10px;
            }
            .avatar-upload input[type="file"] {
                position: absolute;
                top: 0;
                right: 0;
                min-width: 100%;
                min-height: 100%;
                font-size: 100px;
                opacity: 0;
                cursor: pointer;
            }
            .avatar-preview {
                width: 100px;
                height: 100px;
                border-radius: 50%;
                object-fit: cover;
                border: 2px solid #eee;
            }
            .search-container {
                display: flex;
                gap: 10px;
                margin-bottom: 20px;
            }
            .search-input {
                flex: 1;
            }
            .filter-container {
                display: flex;
                gap: 10px;
                margin-bottom: 20px;
            }
            .filter-select {
                flex: 1;
            }
            .pagination {
                display: flex;
                justify-content: center;
                margin-top: 20px;
            }
            .pagination-btn {
                padding: 5px 10px;
                margin: 0 5px;
                border: 1px solid #ddd;
                border-radius: 4px;
                cursor: pointer;
                transition: all 0.2s ease;
            }
            .pagination-btn:hover {
                background-color: #f5f5f5;
            }
            .pagination-btn.active {
                background-color: #1976D2;
                color: white;
                border-color: #1976D2;
            }
            .pagination-btn.disabled {
                opacity: 0.5;
                cursor: not-allowed;
            }
            .pagination-btn.disabled:hover {
                background-color: transparent;
            }
            .no-data {
                text-align: center;
                padding: 50px 0;
                color: #999;
            }
            .no-data i {
                font-size: 48px;
                margin-bottom: 10px;
                color: #ddd;
            }
            .settings-form {
                max-width: 600px;
                margin: 0 auto;
            }
            .settings-form .form-group {
                margin-bottom: 20px;
            }
            .settings-form .form-label {
                font-weight: 500;
                margin-bottom: 8px;
            }
            .settings-form .form-control {
                padding: 10px 15px;
                font-size: 16px;
            }
            .settings-form .form-description {
                font-size: 14px;
                color: #666;
                margin-top: 5px;
            }
            .settings-form .btn {
                padding: 10px 20px;
                font-size: 16px;
            }
            
            /* 分页控件样式 */
            .pagination {
                display: flex;
                justify-content: center;
                margin: 15px 0;
            }
            
            .pagination-btn {
                padding: 6px 12px;
                margin: 0 4px;
                border: 1px solid #ddd;
                border-radius: 4px;
                background-color: white;
                color: #333;
                cursor: pointer;
                transition: all 0.2s;
            }
            
            .pagination-btn:hover {
                background-color: #f5f5f5;
                border-color: #ccc;
            }
            
            .pagination-btn.active {
                background-color: #1976D2;
                color: white;
                border-color: #1976D2;
            }
            
            .pagination-btn:disabled {
                opacity: 0.5;
                cursor: not-allowed;
            }
        }
    </style>
</head>
<body>
    <!-- 登录页面 -->
    <div id="login-page" class="login-container">
        <div class="login-card">
            <div class="logo-container">
                <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/c52336a4db0f4c8db44663d1784ea5d2~tplv-a9rns2rl98-image.image?rcl=2025110614152671A2A3895168B006359A&amp;rk3s=8e244e95&amp;rrcfp=f06b921b&amp;x-expires=1765001794&amp;x-signature=Bf31mHAMETvAAqWT5I5TTf58QzE%3D" alt="益泽供应链-司机评分系统" class="logo">
                <h1 class="app-title">益泽供应链-司机评分系统</h1>
            </div>
            <form id="login-form">
                <div class="form-group">
                    <label for="username" class="form-label">用户名</label>
                    <input type="text" id="username" name="username" class="form-control" placeholder="请输入用户名" required="">
                </div>
                <div class="form-group">
                    <label for="password" class="form-label">密码</label>
                    <input type="password" id="password" name="password" class="form-control" placeholder="请输入密码" required="">
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary w-full">登录</button>
                </div>
                <div class="text-center text-sm text-gray-500 mt-3">
                    益泽供应链-驾驶员信用评分系统                </div>
            </form>
        </div>
    </div>

    <!-- 主页面 -->
    <div id="main-page" style="display: none;">
        <!-- 顶部导航栏 -->
        <header class="header">
            <button class="header-menu-btn" id="menu-btn" style="display: none;">
                <i class="fa fa-bars" aria-hidden="true"></i>
            </button>
            <div class="header-logo">
                <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/c52336a4db0f4c8db44663d1784ea5d2~tplv-a9rns2rl98-image.image?rcl=2025110614152671A2A3895168B006359A&amp;rk3s=8e244e95&amp;rrcfp=f06b921b&amp;x-expires=1765001794&amp;x-signature=Bf31mHAMETvAAqWT5I5TTf58QzE%3D" alt="Logo">
                <h1>益泽供应链-司机评分系统</h1>
      </div>
            <div class="header-user">
                <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/4cfdd08786ba461eae3220c3f4a0a8fe~tplv-a9rns2rl98-image.image?rcl=2025110614152671A2A3895168B006359A&amp;rk3s=8e244e95&amp;rrcfp=f06b921b&amp;x-expires=1765001781&amp;x-signature=%2FF3BiuxjTPY7bLvkbUgT7NwE8V0%3D" alt="用户头像" class="avatar" id="user-avatar">
                <div class="user-info">
                    <div class="username" id="user-name">管理员</div>
                    <div class="role" id="user-role">超级管理员</div>
                </div>
                <div class="logout-btn" id="logout-btn">
                    <i class="fa fa-sign-out" aria-hidden="true"></i>
                </div>
            </div>
        </header>

        <!-- 侧边栏 -->
        <aside class="sidebar">
            <nav class="sidebar-menu" id="sidebar-menu">
                <div class="menu-item active" data-target="dashboard">
                    <i class="fa fa-dashboard" aria-hidden="true"></i>
                    <span>仪表盘</span>
                </div>
                <div class="menu-item" data-target="driver-management">
                    <i class="fa fa-users" aria-hidden="true"></i>
                    <span>司机管理</span>
                </div>
                <div class="menu-item" data-target="violation-rules">
                    <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
                    <span>违规条例</span>
                </div>
                <div class="menu-item" data-target="praise-rules">
                    <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                    <span>表扬条例</span>
                </div>
                <div class="menu-item" data-target="user-management">
                    <i class="fa fa-user-circle" aria-hidden="true"></i>
                    <span>用户管理</span>
                </div>
                <div class="menu-item" data-target="data-report">
                    <i class="fa fa-bar-chart" aria-hidden="true"></i>
                    <span>数据报表</span>
                </div>
                <div class="menu-item" data-target="settings">
                    <i class="fa fa-cog" aria-hidden="true"></i>
                    <span>系统设置</span>
                </div>
            </nav>
        </aside>

        <!-- 主内容区域 -->
        <main class="content">
            <!-- 仪表盘 -->
            <div id="dashboard" class="tab active">
                <div class="page-title">
                    <h2>仪表盘</h2>
                </div>

                <div class="stat-container">
                    <div class="stat-card">
                        <i class="fa fa-users fa-2x text-primary" aria-hidden="true"></i>
                        <div class="stat-value" id="total-drivers">0</div>
                        <div class="stat-label">总司机数</div>
                    </div>
                    <div class="stat-card cursor-pointer" id="violations-stat-card">
                        <i class="fa fa-exclamation-triangle fa-2x text-warning" aria-hidden="true"></i>
                        <div class="stat-value" id="total-violations">0</div>
                        <div class="stat-label">本月违规数</div>
                    </div>
                    <div class="stat-card cursor-pointer" id="praises-stat-card">
                        <i class="fa fa-thumbs-up fa-2x text-success" aria-hidden="true"></i>
                        <div class="stat-value" id="total-praises">0</div>
                        <div class="stat-label">本月表扬数</div>
                    </div>
                    <div class="stat-card">
                        <i class="fa fa-star fa-2x text-info" aria-hidden="true"></i>
                        <div class="stat-value" id="average-score">0</div>
                        <div class="stat-label">平均评分</div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <h2>评分分布</h2>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="score-distribution-chart"></canvas>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <h2>最近记录</h2>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>司机</th>
                                        <th>类型</th>
                                        <th>条例</th>
                                        <th>分数</th>
                                        <th>操作人</th>
                                        <th>日期</th>
                                    </tr>
                                </thead>
                                <tbody id="recent-records-table">
                                    <!-- 最近记录将通过JavaScript动态填充 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 司机管理 -->
            <div id="driver-management" class="tab">
                <div class="page-title">
                    <h2>司机管理</h2>
                    <button id="add-driver-btn" class="btn btn-primary">
                        <i class="fa fa-plus" aria-hidden="true"></i> 添加司机
                    </button>
                </div>

                <div class="search-container">
                    <input type="text" id="driver-search" class="form-control search-input" placeholder="搜索司机姓名、电话...">
                    <select id="driver-filter" class="form-control filter-select">
                        <option value="all">全部司机</option>
                        <option value="high-score">高分司机 (≥8分)</option>
                        <option value="low-score">低分司机 (&lt;8分)</option>
                    </select>
                </div>

                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-drivers">
                                <thead>
                                    <tr>
                                        <th>头像</th>
                                        <th>姓名</th>
                                        <th>电话</th>
                                        <th>评分</th>
                                        <th>保证金</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="drivers-table">
                                    <!-- 司机列表将通过JavaScript动态填充 -->
                                </tbody>
                            </table>
                        </div>
                        <div id="drivers-pagination" class="pagination">
                            <!-- 分页控件将通过JavaScript动态填充 -->
                        </div>
                    </div>
                </div>
            </div>

            <!-- 违规条例 -->
            <div id="violation-rules" class="tab">
                <div class="page-title">
                    <h2>违规条例</h2>
                    <button id="add-violation-btn" class="btn btn-primary">
                        <i class="fa fa-plus" aria-hidden="true"></i> 添加违规条例
                    </button>
                </div>

                <div class="search-container">
                    <input type="text" id="violation-search" class="form-control search-input" placeholder="搜索违规条例...">
                </div>

                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>名称</th>
                                        <th>描述</th>
                                        <th>扣分值</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="violations-table">
                                    <!-- 违规条例列表将通过JavaScript动态填充 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 表扬条例 -->
            <div id="praise-rules" class="tab">
                <div class="page-title">
                    <h2>表扬条例</h2>
                    <button id="add-praise-btn" class="btn btn-primary">
                        <i class="fa fa-plus" aria-hidden="true"></i> 添加表扬条例
                    </button>
                </div>

                <div class="search-container">
                    <input type="text" id="praise-search" class="form-control search-input" placeholder="搜索表扬条例...">
                </div>

                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>名称</th>
                                        <th>描述</th>
                                        <th>加分值</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="praises-table">
                                    <!-- 表扬条例列表将通过JavaScript动态填充 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 用户管理 -->
            <div id="user-management" class="tab">
                <div class="page-title">
                    <h2>用户管理</h2>
                    <button id="add-user-btn" class="btn btn-primary">
                        <i class="fa fa-plus" aria-hidden="true"></i> 添加用户
                    </button>
                </div>

                <div class="search-container">
                    <input type="text" id="user-search" class="form-control search-input" placeholder="搜索用户名...">
                </div>

                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>用户名</th>
                                        <th>角色</th>
                                        <th>管理司机数</th>
                                        <th>创建时间</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="users-table">
                                    <!-- 用户列表将通过JavaScript动态填充 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 数据报表 -->
            <div id="data-report" class="tab">
                <div class="page-title">
                    <h2>数据报表</h2>
                </div>

                <div class="filter-container">
                    <select id="report-period" class="form-control filter-select">
                        <option value="week">本周</option>
                        <option value="month" selected="">本月</option>
                        <option value="quarter">本季度</option>
                        <option value="year">本年度</option>
                    </select>
                    <button id="generate-report-btn" class="btn btn-primary">
                        <i class="fa fa-refresh" aria-hidden="true"></i> 生成报表
                    </button>
                    <button id="export-report-btn" class="btn btn-outline">
                        <i class="fa fa-download" aria-hidden="true"></i> 导出报表
                    </button>
                </div>

                <div class="card">
                    <div class="card-header">
                        <h2>评分趋势</h2>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="score-trend-chart"></canvas>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <h2>违规/表扬统计</h2>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="violation-praise-chart"></canvas>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <h2>司机评分排名</h2>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>排名</th>
                                        <th>司机</th>
                                        <th>评分</th>
                                        <th>违规次数</th>
                                        <th>表扬次数</th>
                                    </tr>
                                </thead>
                                <tbody id="driver-ranking-table">
                                    <!-- 司机排名将通过JavaScript动态填充 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 系统设置 -->
            <div id="settings" class="tab">
                <div class="page-title">
                    <h2>系统设置</h2>
                </div>

                <div class="card">
                    <div class="card-body">
                        <form id="settings-form" class="settings-form">
                            <div class="form-group">
                                <label for="total-score" class="form-label">总分设置</label>
                                <input type="number" id="total-score" name="total-score" class="form-control" min="1" max="100" required="">
                                <div class="form-description">设置司机评分的总分值，默认为100分</div>
                            </div>
                            <div class="form-group">
                                <label for="penalty-threshold" class="form-label">处罚阈值</label>
                                <input type="number" id="penalty-threshold" name="penalty-threshold" class="form-control" min="1" max="100" required="">
                                <div class="form-description">当司机评分低于此阈值时，需要缴纳保证金</div>
                            </div>
                            <div class="form-group">
                                <label for="deposit-amount" class="form-label">保证金金额</label>
                                <input type="number" id="deposit-amount" name="deposit-amount" class="form-control" min="0" required="">
                                <div class="form-description">司机评分低于阈值时需要缴纳的保证金金额</div>
                            </div>
                            <div class="form-group">
                                <button type="submit" class="btn btn-primary">保存设置</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 模态框 -->
    <!-- 添加/编辑司机模态框 -->
    <div id="driver-modal" class="modal">
        <div class="modal-content">
            <div class="flex justify-between items-center mb-4">
                <h2 id="driver-modal-title">添加司机</h2>
                <span class="close-modal text-gray-500 hover:text-gray-700 cursor-pointer">×</span>
            </div>
            <form id="driver-form">
                <input type="hidden" id="driver-id">
                <div class="form-group text-center">
                    <div class="avatar-upload">
                        <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/4cfdd08786ba461eae3220c3f4a0a8fe~tplv-a9rns2rl98-image.image?rcl=2025110614152671A2A3895168B006359A&amp;rk3s=8e244e95&amp;rrcfp=f06b921b&amp;x-expires=1765001781&amp;x-signature=%2FF3BiuxjTPY7bLvkbUgT7NwE8V0%3D" alt="司机头像" class="avatar-preview" id="driver-avatar-preview">
                        <input type="file" id="driver-avatar" accept="image/*">
                    </div>
                    <p class="text-sm text-gray-500">点击上传头像</p>
                </div>
                <div class="form-group">
                    <label for="driver-name" class="form-label">姓名</label>
                    <input type="text" id="driver-name" name="driver-name" class="form-control" placeholder="请输入司机姓名" required="">
                </div>
                <div class="form-group">
                    <label for="driver-phone" class="form-label">电话</label>
                    <input type="tel" id="driver-phone" name="driver-phone" class="form-control" placeholder="请输入联系电话" required="">
                </div>
                <div class="form-group">
                    <label for="driver-score" class="form-label">评分</label>
                    <div class="score-input-container">
                        <input type="number" id="driver-score" name="driver-score" class="form-control" min="0" step="0.1" value="10" required="">
                        <span id="score-readonly" class="score-readonly-value">10</span>
                    </div>
                </div>
                <div id="deposit-field-group" class="form-group">
                    <label for="driver-deposit" class="form-label">保证金</label>
                    <input type="number" id="driver-deposit" name="driver-deposit" class="form-control" min="0" value="0" required="">
                </div>
                <div class="form-group flex justify-end gap-2">
                    <button type="button" class="btn btn-outline close-modal">取消</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 司机详情模态框 -->
    <div id="driver-detail-modal" class="modal">
        <div class="modal-content">
            <div class="flex justify-between items-center mb-4">
                <h2 id="driver-detail-title">司机详情</h2>
                <span class="close-modal text-gray-500 hover:text-gray-700 cursor-pointer">×</span>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                <div class="text-center">
                    <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/4cfdd08786ba461eae3220c3f4a0a8fe~tplv-a9rns2rl98-image.image?rcl=2025110614152671A2A3895168B006359A&amp;rk3s=8e244e95&amp;rrcfp=f06b921b&amp;x-expires=1765001781&amp;x-signature=%2FF3BiuxjTPY7bLvkbUgT7NwE8V0%3D" alt="司机头像" class="avatar-lg mx-auto" id="detail-avatar">
                    <h3 class="text-xl font-bold mt-2" id="detail-name"></h3>
                    <div class="rating-stars mt-1" id="detail-rating"></div>
                </div>
                <div>
                    <div class="mb-2">
                        <span class="font-semibold">电话：</span>
                        <span id="detail-phone"></span>
                    </div>
                    <div class="mb-2">
                        <span class="font-semibold">当前评分：</span>
                        <span id="detail-score"></span>
                    </div>
                    <div class="mb-2">
                        <span class="font-semibold">保证金：</span>
                        <span id="detail-deposit"></span>
                    </div>
                    <div class="mb-2">
                        <span class="font-semibold">创建时间：</span>
                        <span id="detail-created"></span>
                    </div>
                    <div class="mb-2">
                        <span class="font-semibold">更新时间：</span>
                        <span id="detail-updated"></span>
                    </div>
                </div>
            </div>
            <div class="flex gap-4 mb-4">
                <button id="add-violation-to-driver-btn" class="btn btn-warning">
                    <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> 记录违规
                </button>
                <button id="add-praise-to-driver-btn" class="btn btn-success">
                    <i class="fa fa-thumbs-up" aria-hidden="true"></i> 记录表扬
                </button>
                <button id="edit-driver-from-detail-btn" class="btn btn-primary">
                    <i class="fa fa-pencil" aria-hidden="true"></i> 编辑司机
                </button>
            </div>
            <div class="border-t pt-4">
                <h3 class="text-lg font-semibold mb-2">违规记录</h3>
                <div id="violation-records" class="mb-4">
                    <!-- 违规记录将通过JavaScript动态填充 -->
                </div>
                <div id="violation-pagination" class="pagination flex justify-center space-x-2 mb-6 hidden">
                    <!-- 违规记录分页控件将通过JavaScript动态填充 -->
                </div>
                <h3 class="text-lg font-semibold mb-2">表扬记录</h3>
                <div id="praise-records">
                    <!-- 表扬记录将通过JavaScript动态填充 -->
                </div>
                <div id="praise-pagination" class="pagination flex justify-center space-x-2 mb-6 hidden">
                    <!-- 表扬记录分页控件将通过JavaScript动态填充 -->
                </div>
            </div>
        </div>
    </div>

    <!-- 添加违规记录模态框 -->
    <div id="add-violation-modal" class="modal">
        <div class="modal-content">
            <div class="flex justify-between items-center mb-4">
                <h2>记录违规</h2>
                <span class="close-modal text-gray-500 hover:text-gray-700 cursor-pointer">×</span>
            </div>
            <form id="add-violation-form">
                <input type="hidden" id="violation-driver-id">
                <div class="form-group">
                    <label for="violation-rule" class="form-label">违规条例</label>
                    <select id="violation-rule" name="violation-rule" class="form-control" required="">
                        <!-- 违规条例将通过JavaScript动态填充 -->
                    </select>
                </div>
                <div class="form-group">
                    <label for="violation-score" class="form-label">扣分值</label>
                    <input type="number" id="violation-score" name="violation-score" class="form-control" readonly="">
                </div>
                <div class="form-group">
                    <label for="violation-description" class="form-label">详细描述</label>
                    <textarea id="violation-description" name="violation-description" class="form-control" rows="3" placeholder="请输入违规详情"></textarea>
                </div>
                <div class="form-group">
                    <label for="violation-date" class="form-label">日期</label>
                    <input type="date" id="violation-date" name="violation-date" class="form-control" required="">
                </div>
                <div class="form-group flex justify-end gap-2">
                    <button type="button" class="btn btn-outline close-modal">取消</button>
                    <button type="submit" class="btn btn-warning">记录违规</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 添加表扬记录模态框 -->
    <div id="add-praise-modal" class="modal">
        <div class="modal-content">
            <div class="flex justify-between items-center mb-4">
                <h2>记录表扬</h2>
                <span class="close-modal text-gray-500 hover:text-gray-700 cursor-pointer">×</span>
            </div>
            <form id="add-praise-form">
                <input type="hidden" id="praise-driver-id">
                <div class="form-group">
                    <label for="praise-rule" class="form-label">表扬条例</label>
                    <select id="praise-rule" name="praise-rule" class="form-control" required="">
                        <!-- 表扬条例将通过JavaScript动态填充 -->
                    </select>
                </div>
                <div class="form-group">
                    <label for="praise-score" class="form-label">加分值</label>
                    <input type="number" id="praise-score" name="praise-score" class="form-control" readonly="">
                </div>
                <div class="form-group">
                    <label for="praise-description" class="form-label">详细描述</label>
                    <textarea id="praise-description" name="praise-description" class="form-control" rows="3" placeholder="请输入表扬详情"></textarea>
                </div>
                <div class="form-group">
                    <label for="praise-date" class="form-label">日期</label>
                    <input type="date" id="praise-date" name="praise-date" class="form-control" required="">
                </div>
                <div class="form-group flex justify-end gap-2">
                    <button type="button" class="btn btn-outline close-modal">取消</button>
                    <button type="submit" class="btn btn-success">记录表扬</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 添加/编辑违规条例模态框 -->
    <div id="violation-rule-modal" class="modal">
        <div class="modal-content">
            <div class="flex justify-between items-center mb-4">
                <h2 id="violation-rule-modal-title">添加违规条例</h2>
                <span class="close-modal text-gray-500 hover:text-gray-700 cursor-pointer">×</span>
            </div>
            <form id="violation-rule-form">
                <input type="hidden" id="violation-rule-id">
                <div class="form-group">
                    <label for="violation-rule-name" class="form-label">名称</label>
                    <input type="text" id="violation-rule-name" name="violation-rule-name" class="form-control" placeholder="请输入违规名称" required="">
                </div>
                <div class="form-group">
                    <label for="violation-rule-description" class="form-label">描述</label>
                    <textarea id="violation-rule-description" name="violation-rule-description" class="form-control" rows="3" placeholder="请输入违规描述" required=""></textarea>
                </div>
                <div class="form-group">
                    <label for="violation-rule-score" class="form-label">扣分值</label>
                    <input type="number" id="violation-rule-score" name="violation-rule-score" class="form-control" min="0.1" step="0.1" required="">
                </div>
                <div class="form-group flex justify-end gap-2">
                    <button type="button" class="btn btn-outline close-modal">取消</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 添加/编辑表扬条例模态框 -->
    <div id="praise-rule-modal" class="modal">
        <div class="modal-content">
            <div class="flex justify-between items-center mb-4">
                <h2 id="praise-rule-modal-title">添加表扬条例</h2>
                <span class="close-modal text-gray-500 hover:text-gray-700 cursor-pointer">×</span>
            </div>
            <form id="praise-rule-form">
                <input type="hidden" id="praise-rule-id">
                <div class="form-group">
                    <label for="praise-rule-name" class="form-label">名称</label>
                    <input type="text" id="praise-rule-name" name="praise-rule-name" class="form-control" placeholder="请输入表扬名称" required="">
                </div>
                <div class="form-group">
                    <label for="praise-rule-description" class="form-label">描述</label>
                    <textarea id="praise-rule-description" name="praise-rule-description" class="form-control" rows="3" placeholder="请输入表扬描述" required=""></textarea>
                </div>
                <div class="form-group">
                    <label for="praise-rule-score" class="form-label">加分值</label>
                    <input type="number" id="praise-rule-score" name="praise-rule-score" class="form-control" min="0.1" step="0.1" required="">
                </div>
                <div class="form-group flex justify-end gap-2">
                    <button type="button" class="btn btn-outline close-modal">取消</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 添加/编辑用户模态框 -->
    <div id="user-modal" class="modal">
        <div class="modal-content">
            <div class="flex justify-between items-center mb-4">
                <h2 id="user-modal-title">添加用户</h2>
                <span class="close-modal text-gray-500 hover:text-gray-700 cursor-pointer">×</span>
            </div>
            <form id="user-form">
                <input type="hidden" id="user-id">
                <div class="form-group">
                    <label for="user-username" class="form-label">用户名</label>
                    <input type="text" id="user-username" name="user-username" class="form-control" placeholder="请输入用户名" required="">
                </div>
                <div class="form-group">
                    <label for="user-password" class="form-label">密码</label>
                    <input type="password" id="user-password" name="user-password" class="form-control" placeholder="请输入密码（留空表示不修改）">
                </div>
                <div class="form-group">
                    <label for="user-role" class="form-label">角色</label>
                    <select id="user-role" name="user-role" class="form-control" required="">
                        <option value="admin">管理员</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">权限设置</label>
                    <div class="permission-group">
                        <div class="permission-group-title">基础权限</div>
                        <div class="permission-list">
                            <div class="permission-item">
                                <input type="checkbox" id="permission-dashboard" name="permissions" value="dashboard" checked="">
                                <label for="permission-dashboard">仪表盘</label>
                            </div>
                            <div class="permission-item">
                                <input type="checkbox" id="permission-driver-management" name="permissions" value="driver-management" checked="">
                                <label for="permission-driver-management">司机管理</label>
                            </div>
                            <div class="permission-item">
                                <input type="checkbox" id="permission-violation-rules" name="permissions" value="violation-rules" checked="">
                                <label for="permission-violation-rules">违规条例</label>
                            </div>
                            <div class="permission-item">
                                <input type="checkbox" id="permission-praise-rules" name="permissions" value="praise-rules" checked="">
                                <label for="permission-praise-rules">表扬条例</label>
                            </div>
                        </div>
                    </div>
                    <div class="permission-group">
                        <div class="permission-group-title">高级权限</div>
                        <div class="permission-list">
                            <div class="permission-item">
                                <input type="checkbox" id="permission-user-management" name="permissions" value="user-management">
                                <label for="permission-user-management">用户管理</label>
                            </div>
                            <div class="permission-item">
                                <input type="checkbox" id="permission-data-report" name="permissions" value="data-report">
                                <label for="permission-data-report">数据报表</label>
                            </div>
                            <div class="permission-item">
                                <input type="checkbox" id="permission-settings" name="permissions" value="settings">
                                <label for="permission-settings">系统设置</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">关联司机</label>
                    <div class="driver-list" id="user-drivers-list">
                        <!-- 司机列表将通过JavaScript动态填充 -->
                    </div>
                </div>
                <div class="form-group flex justify-end gap-2">
                    <button type="button" class="btn btn-outline close-modal">取消</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 确认删除模态框 -->
    <div id="confirm-delete-modal" class="modal">
        <div class="modal-content">
            <div class="flex justify-between items-center mb-4">
                <h2>确认删除</h2>
                <span class="close-modal text-gray-500 hover:text-gray-700 cursor-pointer">×</span>
            </div>
            <p id="delete-confirm-message">您确定要删除此记录吗？此操作不可撤销。</p>
            <div class="form-group flex justify-end gap-2 mt-4">
                <button type="button" class="btn btn-outline close-modal">取消</button>
                <button type="button" id="confirm-delete-btn" class="btn btn-danger">删除</button>
            </div>
        </div>
    </div>

    <!-- 加载状态 -->
    <div id="loading" class="loading">
        <div class="loading-spinner"></div>
    </div>

    <!-- 违规人员列表模态框 -->
    <div id="violation-drivers-modal" class="modal">
        <div class="modal-content">
            <div class="flex justify-between items-center mb-4">
                <h2>本月违规人员列表</h2>
                <span class="close-modal text-gray-500 hover:text-gray-700 cursor-pointer">×</span>
            </div>
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>司机</th>
                            <th>违规类型</th>
                            <th>扣分值</th>
                            <th>日期</th>
                            <th>描述</th>
                            <th>操作人</th>
                        </tr>
                    </thead>
                    <tbody id="violation-drivers-table">
                        <!-- 违规人员列表将通过JavaScript动态填充 -->
                    </tbody>
                </table>
            </div>
            <div class="form-group flex justify-end gap-2 mt-4">
                <button type="button" class="btn btn-outline close-modal">关闭</button>
            </div>
        </div>
    </div>
    
    <!-- 表扬人员列表模态框 -->
    <div id="praise-drivers-modal" class="modal">
        <div class="modal-content">
            <div class="flex justify-between items-center mb-4">
                <h2>本月表扬人员列表</h2>
                <span class="close-modal text-gray-500 hover:text-gray-700 cursor-pointer">×</span>
            </div>
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>司机</th>
                            <th>表扬类型</th>
                            <th>加分值</th>
                            <th>日期</th>
                            <th>描述</th>
                            <th>操作人</th>
                        </tr>
                    </thead>
                    <tbody id="praise-drivers-table">
                        <!-- 表扬人员列表将通过JavaScript动态填充 -->
                    </tbody>
                </table>
            </div>
            <div class="form-group flex justify-end gap-2 mt-4">
                <button type="button" class="btn btn-outline close-modal">关闭</button>
            </div>
        </div>
    </div>
    
    <!-- 通知提示 -->
    <div id="notification" class="notification">
        <span id="notification-message"></span>
    </div>

    <script>
        // 工具函数
        function generateId() {
            return Date.now().toString(36) + Math.random().toString(36).substr(2, 5);
        }

        function showLoading() {
            document.getElementById('loading').style.display = 'flex';
        }

        function hideLoading() {
            document.getElementById('loading').style.display = 'none';
        }

        function showModal(modalId) {
            document.getElementById(modalId).style.display = 'block';
        }

        function closeModal(modalId) {
            document.getElementById(modalId).style.display = 'none';
        }

        function showNotification(message, type = 'info', duration = 3000) {
            const notification = document.getElementById('notification');
            const notificationMessage = document.getElementById('notification-message');
            
            notification.className = 'notification';
            notification.classList.add(type);
            notificationMessage.textContent = message;
            
            notification.classList.add('show');
            
            setTimeout(() => {
                notification.classList.remove('show');
            }, duration);
        }

        function formatDate(date) {
            if (!date) return '';
            const d = new Date(date);
            const year = d.getFullYear();
            const month = String(d.getMonth() + 1).padStart(2, '0');
            const day = String(d.getDate()).padStart(2, '0');
            const hours = String(d.getHours()).padStart(2, '0');
            const minutes = String(d.getMinutes()).padStart(2, '0');
            return `${year}-${month}-${day} ${hours}:${minutes}`;
        }

        function generateStars(score, total = 10) {
            const stars = [];
            let scoreText = '';
            
            // 处理超过100分的情况
            if (score > 100) {
                scoreText = `${score}`;
                // 超过100分时显示10颗星
                for (let i = 0; i < 10; i++) {
                    stars.push('<i class="fa fa-star star-filled" aria-hidden="true"></i>');
                }
            } else {
                // 处理100分及以下的情况
                // 每10分对应1颗星，每5分对应半颗星
                const starScore = score / 10;
                const fullStars = Math.floor(starScore);
                const hasHalfStar = (starScore % 1) >= 0.5;
                
                // 最多显示10颗星
                const maxStars = 10;
                
                for (let i = 0; i < fullStars && i < maxStars; i++) {
                    stars.push('<i class="fa fa-star star-filled" aria-hidden="true"></i>');
                }
                
                if (hasHalfStar && stars.length < maxStars) {
                    stars.push('<i class="fa fa-star-half-o star-filled" aria-hidden="true"></i>');
                }
                
                const emptyStars = maxStars - stars.length;
                for (let i = 0; i < emptyStars; i++) {
                    stars.push('<i class="fa fa-star-o star-empty" aria-hidden="true"></i>');
                }
            }
            
            // 如果有分数文本，添加到星星前面
            if (scoreText) {
                return `<span class="score-text">${scoreText}</span><div class="rating-stars">${stars.join('')}</div>`;
            }
            
            return stars.join('');
            
            for (let i = 0; i < fullStars; i++) {
                stars.push('<i class="fa fa-star star-filled" aria-hidden="true"></i>');
            }
            
            if (hasHalfStar) {
                stars.push('<i class="fa fa-star-half-o star-filled" aria-hidden="true"></i>');
            }
            
            const emptyStars = total - stars.length;
            for (let i = 0; i < emptyStars; i++) {
                stars.push('<i class="fa fa-star-o star-empty" aria-hidden="true"></i>');
            }
            
            return stars.join('');
        }

        // 数据管理
        const DataManager = {
            // 初始化数据
            init() {
                // 检查是否已有数据
                if (!localStorage.getItem('drivers')) {
                    this.initDrivers();
                }
                
                if (!localStorage.getItem('violationRules')) {
                    this.initViolationRules();
                }
                
                if (!localStorage.getItem('praiseRules')) {
                    this.initPraiseRules();
                }
                
                if (!localStorage.getItem('users')) {
                    this.initUsers();
                }
                
                if (!localStorage.getItem('violationRecords')) {
                    localStorage.setItem('violationRecords', JSON.stringify([]));
                }
                
                if (!localStorage.getItem('praiseRecords')) {
                    localStorage.setItem('praiseRecords', JSON.stringify([]));
                }
                
                if (!localStorage.getItem('settings')) {
                    this.initSettings();
                }
            },
            
            // 初始化司机数据
            initDrivers() {
                const drivers = [
                    {
                        id: 'd1',
                        name: '张三',
                        phone: '13800138000',
                        licenseNumber: '110101198001011234',
                        avatar: 'https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/4cfdd08786ba461eae3220c3f4a0a8fe~tplv-a9rns2rl98-image.image?rcl=2025110614152671A2A3895168B006359A&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1765001781&x-signature=%2FF3BiuxjTPY7bLvkbUgT7NwE8V0%3D',
                        totalScore: 100,
                        currentScore: 85,
                        deposit: 0,
                        violations: [],
                        praises: [],
                        createdAt: new Date().toISOString(),
                        updatedAt: new Date().toISOString()
                    },
                    {
                        id: 'd2',
                        name: '李四',
                        phone: '13900139000',
                        licenseNumber: '110101198501015678',
                        avatar: 'https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/4cfdd08786ba461eae3220c3f4a0a8fe~tplv-a9rns2rl98-image.image?rcl=2025110614152671A2A3895168B006359A&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1765001781&x-signature=%2FF3BiuxjTPY7bLvkbUgT7NwE8V0%3D',
                        totalScore: 100,
                        currentScore: 70,
                        deposit: 500,
                        violations: [],
                        praises: [],
                        createdAt: new Date().toISOString(),
                        updatedAt: new Date().toISOString()
                    },
                    {
                        id: 'd3',
                        name: '王五',
                        phone: '13700137000',
                        licenseNumber: '110101199001019012',
                        avatar: 'https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/4cfdd08786ba461eae3220c3f4a0a8fe~tplv-a9rns2rl98-image.image?rcl=2025110614152671A2A3895168B006359A&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1765001781&x-signature=%2FF3BiuxjTPY7bLvkbUgT7NwE8V0%3D',
                        totalScore: 100,
                        currentScore: 95,
                        deposit: 0,
                        violations: [],
                        praises: [],
                        createdAt: new Date().toISOString(),
                        updatedAt: new Date().toISOString()
                    }
                ];
                
                localStorage.setItem('drivers', JSON.stringify(drivers));
            },
            
            // 初始化违规条例
            initViolationRules() {
                const violationRules = [
                    {
                        id: 'v1',
                        name: '吸烟',
                        description: '在驾驶过程中吸烟',
                        score: 10,
                        createdAt: new Date().toISOString(),
                        updatedAt: new Date().toISOString()
                    },
                    {
                        id: 'v2',
                        name: '超速',
                        description: '超过规定时速行驶',
                        score: 15,
                        createdAt: new Date().toISOString(),
                        updatedAt: new Date().toISOString()
                    },
                    {
                        id: 'v3',
                        name: '闯红灯',
                        description: '违反交通信号灯指示',
                        score: 25,
                        createdAt: new Date().toISOString(),
                        updatedAt: new Date().toISOString()
                    }
                ];
                
                localStorage.setItem('violationRules', JSON.stringify(violationRules));
            },
            
            // 初始化表扬条例
            initPraiseRules() {
                const praiseRules = [
                    {
                        id: 'p1',
                        name: '拾金不昧',
                        description: '捡到乘客物品主动归还',
                        score: 1,
                        createdAt: new Date().toISOString(),
                        updatedAt: new Date().toISOString()
                    },
                    {
                        id: 'p2',
                        name: '助人为乐',
                        description: '主动帮助有需要的乘客',
                        score: 1,
                        createdAt: new Date().toISOString(),
                        updatedAt: new Date().toISOString()
                    },
                    {
                        id: 'p3',
                        name: '安全驾驶',
                        description: '连续3个月无违规记录',
                        score: 10,
                        createdAt: new Date().toISOString(),
                        updatedAt: new Date().toISOString()
                    }
                ];
                
                localStorage.setItem('praiseRules', JSON.stringify(praiseRules));
            },
            
            // 初始化用户
            initUsers() {
                const users = [
                    {
                        id: 'u1',
                        username: 'admin',
                        password: '123456',
                        role: 'super_admin',
                        permissions: ['dashboard', 'driver_management', 'violation_rules', 'praise_rules', 'user_management', 'data_report', 'settings'],
                        managedDrivers: [],
                        createdAt: new Date().toISOString(),
                        updatedAt: new Date().toISOString()
                    },
                    {
                        id: 'u2',
                        username: 'manager1',
                        password: '123456',
                        role: 'admin',
                        permissions: ['dashboard', 'driver_management', 'violation_rules', 'praise_rules'],
                        managedDrivers: ['d1', 'd2'],
                        createdAt: new Date().toISOString(),
                        updatedAt: new Date().toISOString()
                    }
                ];
                
                localStorage.setItem('users', JSON.stringify(users));
            },
            
            // 初始化系统设置
            initSettings() {
                const settings = {
                    totalScore: 100,
                    penaltyThreshold: 80,
                    depositAmount: 500,
                    updatedAt: new Date().toISOString()
                };
                
                localStorage.setItem('settings', JSON.stringify(settings));
            },
            
            // 获取所有司机
            getDrivers() {
                return JSON.parse(localStorage.getItem('drivers') || '[]');
            },
            
            // 获取司机
            getDriver(id) {
                const drivers = this.getDrivers();
                return drivers.find(driver => driver.id === id);
            },
            
            // 添加司机
            addDriver(driver) {
                const drivers = this.getDrivers();
                driver.id = generateId();
                driver.totalScore = this.getSettings().totalScore;
                driver.currentScore = driver.totalScore;
                driver.deposit = 0;
                driver.violations = [];
                driver.praises = [];
                driver.createdAt = new Date().toISOString();
                driver.updatedAt = new Date().toISOString();
                
                drivers.push(driver);
                localStorage.setItem('drivers', JSON.stringify(drivers));
                
                return driver;
            },
            
            // 更新司机
            updateDriver(id, data) {
                const drivers = this.getDrivers();
                const index = drivers.findIndex(driver => driver.id === id);
                
                if (index !== -1) {
                    drivers[index] = {
                        ...drivers[index],
                        ...data,
                        updatedAt: new Date().toISOString()
                    };
                    
                    localStorage.setItem('drivers', JSON.stringify(drivers));
                    return drivers[index];
                }
                
                return null;
            },
            
            // 删除司机
            deleteDriver(id) {
                const drivers = this.getDrivers();
                const newDrivers = drivers.filter(driver => driver.id !== id);
                
                if (newDrivers.length !== drivers.length) {
                    localStorage.setItem('drivers', JSON.stringify(newDrivers));
                    
                    // 同时删除相关记录
                    this.deleteDriverRecords(id);
                    
                    return true;
                }
                
                return false;
            },
            
            // 删除司机相关记录
            deleteDriverRecords(driverId) {
                // 删除违规记录
                const violationRecords = this.getViolationRecords();
                const newViolationRecords = violationRecords.filter(record => record.driverId !== driverId);
                localStorage.setItem('violationRecords', JSON.stringify(newViolationRecords));
                
                // 删除表扬记录
                const praiseRecords = this.getPraiseRecords();
                const newPraiseRecords = praiseRecords.filter(record => record.driverId !== driverId);
                localStorage.setItem('praiseRecords', JSON.stringify(newPraiseRecords));
                
                // 更新用户管理的司机
                const users = this.getUsers();
                users.forEach(user => {
                    if (user.managedDrivers && user.managedDrivers.includes(driverId)) {
                        user.managedDrivers = user.managedDrivers.filter(id => id !== driverId);
                    }
                });
                localStorage.setItem('users', JSON.stringify(users));
            },
            
            // 获取所有违规条例
            getViolationRules() {
                return JSON.parse(localStorage.getItem('violationRules') || '[]');
            },
            
            // 获取违规条例
            getViolationRule(id) {
                const rules = this.getViolationRules();
                return rules.find(rule => rule.id === id);
            },
            
            // 添加违规条例
            addViolationRule(rule) {
                const rules = this.getViolationRules();
                
                // 检查名称是否已存在
                if (rules.some(r => r.name === rule.name)) {
                    throw new Error('违规条例名称已存在');
                }
                
                rule.id = generateId();
                rule.createdAt = new Date().toISOString();
                rule.updatedAt = new Date().toISOString();
                
                rules.push(rule);
                localStorage.setItem('violationRules', JSON.stringify(rules));
                
                return rule;
            },
            
            // 更新违规条例
            updateViolationRule(id, data) {
                const rules = this.getViolationRules();
                const index = rules.findIndex(rule => rule.id === id);
                
                if (index !== -1) {
                    // 检查名称是否已存在
                    if (data.name && rules.some((r, i) => i !== index && r.name === data.name)) {
                        throw new Error('违规条例名称已存在');
                    }
                    
                    rules[index] = {
                        ...rules[index],
                        ...data,
                        updatedAt: new Date().toISOString()
                    };
                    
                    localStorage.setItem('violationRules', JSON.stringify(rules));
                    return rules[index];
                }
                
                return null;
            },
            
            // 删除违规条例
            deleteViolationRule(id) {
                const rules = this.getViolationRules();
                const newRules = rules.filter(rule => rule.id !== id);
                
                if (newRules.length !== rules.length) {
                    localStorage.setItem('violationRules', JSON.stringify(newRules));
                    return true;
                }
                
                return false;
            },
            
            // 获取所有表扬条例
            getPraiseRules() {
                return JSON.parse(localStorage.getItem('praiseRules') || '[]');
            },
            
            // 获取表扬条例
            getPraiseRule(id) {
                const rules = this.getPraiseRules();
                return rules.find(rule => rule.id === id);
            },
            
            // 添加表扬条例
            addPraiseRule(rule) {
                const rules = this.getPraiseRules();
                
                // 检查名称是否已存在
                if (rules.some(r => r.name === rule.name)) {
                    throw new Error('表扬条例名称已存在');
                }
                
                rule.id = generateId();
                rule.createdAt = new Date().toISOString();
                rule.updatedAt = new Date().toISOString();
                
                rules.push(rule);
                localStorage.setItem('praiseRules', JSON.stringify(rules));
                
                return rule;
            },
            
            // 更新表扬条例
            updatePraiseRule(id, data) {
                const rules = this.getPraiseRules();
                const index = rules.findIndex(rule => rule.id === id);
                
                if (index !== -1) {
                    // 检查名称是否已存在
                    if (data.name && rules.some((r, i) => i !== index && r.name === data.name)) {
                        throw new Error('表扬条例名称已存在');
                    }
                    
                    rules[index] = {
                        ...rules[index],
                        ...data,
                        updatedAt: new Date().toISOString()
                    };
                    
                    localStorage.setItem('praiseRules', JSON.stringify(rules));
                    return rules[index];
                }
                
                return null;
            },
            
            // 删除表扬条例
            deletePraiseRule(id) {
                const rules = this.getPraiseRules();
                const newRules = rules.filter(rule => rule.id !== id);
                
                if (newRules.length !== rules.length) {
                    localStorage.setItem('praiseRules', JSON.stringify(newRules));
                    return true;
                }
                
                return false;
            },
            
            // 获取所有用户
            getUsers() {
                return JSON.parse(localStorage.getItem('users') || '[]');
            },
            
            // 获取用户
            getUser(id) {
                const users = this.getUsers();
                return users.find(user => user.id === id);
            },
            
            // 通过用户名获取用户
            getUserByUsername(username) {
                const users = this.getUsers();
                return users.find(user => user.username === username);
            },
            
            // 添加用户
            addUser(user) {
                const users = this.getUsers();
                
                // 检查用户名是否已存在
                if (users.some(u => u.username === user.username)) {
                    throw new Error('用户名已存在');
                }
                
                user.id = generateId();
                user.role = 'admin';
                user.createdAt = new Date().toISOString();
                user.updatedAt = new Date().toISOString();
                
                users.push(user);
                localStorage.setItem('users', JSON.stringify(users));
                
                return user;
            },
            
            // 更新用户
            updateUser(id, data) {
                const users = this.getUsers();
                const index = users.findIndex(user => user.id === id);
                
                if (index !== -1) {
                    // 检查用户名是否已存在
                    if (data.username && users.some((u, i) => i !== index && u.username === data.username)) {
                        throw new Error('用户名已存在');
                    }
                    
                    users[index] = {
                        ...users[index],
                        ...data,
                        updatedAt: new Date().toISOString()
                    };
                    
                    localStorage.setItem('users', JSON.stringify(users));
                    return users[index];
                }
                
                return null;
            },
            
            // 删除用户
            deleteUser(id) {
                const users = this.getUsers();
                const newUsers = users.filter(user => user.id !== id);
                
                if (newUsers.length !== users.length) {
                    localStorage.setItem('users', JSON.stringify(newUsers));
                    return true;
                }
                
                return false;
            },
            
            // 获取所有违规记录
            getViolationRecords() {
                return JSON.parse(localStorage.getItem('violationRecords') || '[]');
            },
            
            // 获取司机的违规记录
            getDriverViolationRecords(driverId) {
                const records = this.getViolationRecords();
                return records.filter(record => record.driverId === driverId);
            },
            
            // 删除违规记录
            deleteViolationRecord(id) {
                const records = this.getViolationRecords();
                const newRecords = records.filter(record => record.id !== id);
                
                if (newRecords.length !== records.length) {
                    localStorage.setItem('violationRecords', JSON.stringify(newRecords));
                    return true;
                }
                
                return false;
            },
            
            // 删除表扬记录
            deletePraiseRecord(id) {
                const records = this.getPraiseRecords();
                const newRecords = records.filter(record => record.id !== id);
                
                if (newRecords.length !== records.length) {
                    localStorage.setItem('praiseRecords', JSON.stringify(newRecords));
                    return true;
                }
                
                return false;
            },
            
            // 添加违规记录
            addViolationRecord(record) {
                const records = this.getViolationRecords();
                record.id = generateId();
                record.createdAt = new Date().toISOString();
                
                records.push(record);
                localStorage.setItem('violationRecords', JSON.stringify(records));
                
                // 更新司机评分
                this.updateDriverScore(record.driverId, -record.score);
                
                return record;
            },
            
            // 获取所有表扬记录
            getPraiseRecords() {
                return JSON.parse(localStorage.getItem('praiseRecords') || '[]');
            },
            
            // 获取司机的表扬记录
            getDriverPraiseRecords(driverId) {
                const records = this.getPraiseRecords();
                return records.filter(record => record.driverId === driverId);
            },
            
            // 添加表扬记录
            addPraiseRecord(record) {
                const records = this.getPraiseRecords();
                record.id = generateId();
                record.createdAt = new Date().toISOString();
                
                records.push(record);
                localStorage.setItem('praiseRecords', JSON.stringify(records));
                
                // 更新司机评分
                this.updateDriverScore(record.driverId, record.score);
                
                return record;
            },
            
            // 更新司机评分
            updateDriverScore(driverId, scoreChange) {
                const driver = this.getDriver(driverId);
                if (!driver) return;
                
                const settings = this.getSettings();
                let newScore = driver.currentScore + scoreChange;
                
                // 确保评分不超过总分或低于0
                newScore = Math.max(0, Math.min(settings.totalScore, newScore));
                
                // 检查是否需要缴纳保证金
                let deposit = driver.deposit;
                if (newScore < settings.penaltyThreshold) {
                    // 如果评分低于阈值，设置为系统规定的保证金金额
                    deposit = settings.depositAmount;
                } else if (newScore >= settings.penaltyThreshold) {
                    // 如果评分高于或等于阈值，保证金为0
                    deposit = 0;
                }
                
                // 更新司机信息
                this.updateDriver(driverId, {
                    currentScore: newScore,
                    deposit: deposit
                });
                
                // 更新司机的记录列表
                if (scoreChange < 0) {
                    // 违规记录
                    if (!driver.violations) driver.violations = [];
                    driver.violations.push(generateId()); // 这里只是占位，实际应该是记录ID
                } else {
                    // 表扬记录
                    if (!driver.praises) driver.praises = [];
                    driver.praises.push(generateId()); // 这里只是占位，实际应该是记录ID
                }
            },
            
            // 获取系统设置
            getSettings() {
                return JSON.parse(localStorage.getItem('settings') || '{}');
            },
            
            // 更新系统设置
            updateSettings(settings) {
                const currentSettings = this.getSettings();
                const newSettings = {
                    ...currentSettings,
                    ...settings,
                    updatedAt: new Date().toISOString()
                };
                
                localStorage.setItem('settings', JSON.stringify(newSettings));
                return newSettings;
            },
            
            // 获取用户管理的司机
            getUserManagedDrivers(userId) {
                const user = this.getUser(userId);
                if (!user || !user.managedDrivers || user.role === 'super_admin') {
                    return this.getDrivers();
                }
                
                return this.getDrivers().filter(driver => user.managedDrivers.includes(driver.id));
            },
            
            // 获取最近记录
            getRecentRecords(limit = 10, currentUser = null) {
                const violationRecords = this.getViolationRecords().map(record => ({
                    ...record,
                    type: 'violation'
                }));
                
                const praiseRecords = this.getPraiseRecords().map(record => ({
                    ...record,
                    type: 'praise'
                }));
                
                // 合并并按时间排序
                let allRecords = [...violationRecords, ...praiseRecords]
                    .sort((a, b) => new Date(b.date) - new Date(a.date));
                
                // 如果是普通管理员，只显示自己创建的记录
                if (currentUser && currentUser.role !== 'super_admin') {
                    allRecords = allRecords.filter(record => record.createdBy === currentUser.id);
                }
                
                // 应用记录数量限制
                allRecords = allRecords.slice(0, limit);
                
                // 添加司机、条例和操作人信息
                return allRecords.map(record => {
                    const driver = this.getDriver(record.driverId);
                    let rule = null;
                    
                    if (record.type === 'violation') {
                        rule = this.getViolationRule(record.violationId);
                    } else {
                        rule = this.getPraiseRule(record.praiseId);
                    }
                    
                    // 获取操作人信息
                    const operator = record.createdBy ? this.getUser(record.createdBy) : null;
                    
                    return {
                        ...record,
                        driverName: driver ? driver.name : '未知司机',
                        ruleName: rule ? rule.name : '未知条例',
                        operator: operator ? operator.username : '未知'
                    };
                });
            },
            
            // 获取司机评分排名
            getDriverRanking() {
                return this.getDrivers()
                    .sort((a, b) => b.currentScore - a.currentScore)
                    .map((driver, index) => ({
                        ...driver,
                        rank: index + 1,
                        violationCount: this.getDriverViolationRecords(driver.id).length,
                        praiseCount: this.getDriverPraiseRecords(driver.id).length
                    }));
            },
            
            // 获取评分分布数据
            getScoreDistribution() {
                const drivers = this.getDrivers();
                const settings = this.getSettings();
                
                // 创建评分区间
                const ranges = [
                    { min: 0, max: 3, label: '0-39分' },
                    { min: 3, max: 6, label: '40-60分' },
                    { min: 6, max: 8, label: '61-80分' },
                    { min: 8, max: settings.totalScore, label: '81-100分' }
                ];
                
                // 统计每个区间的司机数量
                const distribution = ranges.map(range => {
                    const count = drivers.filter(driver => 
                        driver.currentScore >= range.min && 
                        driver.currentScore < range.max
                    ).length;
                    
                    return {
                        label: range.label,
                        count: count
                    };
                });
                
                return distribution;
            },
            
            // 获取评分趋势数据
            getScoreTrend(period = 'month') {
                // 这里简化处理，实际应该根据时间周期获取数据
                const dates = [];
                const scores = [];
                
                // 生成过去30天的数据
                for (let i = 29; i >= 0; i--) {
                    const date = new Date();
                    date.setDate(date.getDate() - i);
                    dates.push(`${date.getMonth() + 1}/${date.getDate()}`);
                    
                    // 随机生成评分数据，模拟趋势
                    const baseScore = 8 + Math.sin(i / 5) * 1.5;
                    scores.push(parseFloat((baseScore + Math.random() * 0.5 - 0.25).toFixed(1)));
                }
                
                return {
                    dates,
                    scores
                };
            },
            
            // 获取违规/表扬统计数据
            getViolationPraiseStats(period = 'month') {
                // 这里简化处理，实际应该根据时间周期获取数据
                const violationRules = this.getViolationRules();
                const praiseRules = this.getPraiseRules();
                
                const violationStats = violationRules.map(rule => ({
                    name: rule.name,
                    count: Math.floor(Math.random() * 10)
                }));
                
                const praiseStats = praiseRules.map(rule => ({
                    name: rule.name,
                    count: Math.floor(Math.random() * 15)
                }));
                
                return {
                    violationStats,
                    praiseStats
                };
            }
        };

        // 应用控制器
        const AppController = {
            currentUser: null,
            currentPage: 'dashboard',
            currentDriverId: null,
            currentPageNumber: 1,
            itemsPerPage: 10,
            
            // 初始化应用
            init() {
                // 初始化数据
                DataManager.init();
                
                // 绑定事件
                this.bindEvents();
                
                // 检查登录状态
                this.checkLoginStatus();
            },
            
            // 绑定事件
            bindEvents() {
                // 登录表单提交
                document.getElementById('login-form').addEventListener('submit', (e) => {
                    e.preventDefault();
                    this.login();
                });
                
                // 注销按钮点击
                document.getElementById('logout-btn').addEventListener('click', () => {
                    this.logout();
                });
                
                // 菜单按钮点击
                document.getElementById('menu-btn').addEventListener('click', () => {
                    this.toggleSidebar();
                });
                
                // 窗口大小变化时调整布局
                window.addEventListener('resize', () => {
                    this.adjustLayout();
                });
                
                // 登录表单提交
                document.getElementById('login-form').addEventListener('submit', (e) => {
                    e.preventDefault();
                    this.login();
                });
                
                // 侧边栏菜单点击
                document.querySelectorAll('.menu-item').forEach(item => {
                    item.addEventListener('click', () => {
                        const target = item.dataset.target;
                        this.navigateTo(target);
                    });
                });
                
                // 添加司机按钮点击
                document.getElementById('add-driver-btn').addEventListener('click', () => {
                    this.showAddDriverModal();
                });
                
                // 添加违规条例按钮点击
                document.getElementById('add-violation-btn').addEventListener('click', () => {
                    this.showAddViolationRuleModal();
                });
                
                // 添加表扬条例按钮点击
                document.getElementById('add-praise-btn').addEventListener('click', () => {
                    this.showAddPraiseRuleModal();
                });
                
                // 添加用户按钮点击
                document.getElementById('add-user-btn').addEventListener('click', () => {
                    this.showAddUserModal();
                });
                
                // 司机表单提交
                document.getElementById('driver-form').addEventListener('submit', (e) => {
                    e.preventDefault();
                    this.saveDriver();
                });
                
                // 违规条例表单提交
                document.getElementById('violation-rule-form').addEventListener('submit', (e) => {
                    e.preventDefault();
                    this.saveViolationRule();
                });
                
                // 表扬条例表单提交
                document.getElementById('praise-rule-form').addEventListener('submit', (e) => {
                    e.preventDefault();
                    this.savePraiseRule();
                });
                
                // 用户表单提交
                document.getElementById('user-form').addEventListener('submit', (e) => {
                    e.preventDefault();
                    this.saveUser();
                });
                
                // 添加违规记录表单提交
                document.getElementById('add-violation-form').addEventListener('submit', (e) => {
                    e.preventDefault();
                    this.addViolationRecord();
                });
                
                // 添加表扬记录表单提交
                document.getElementById('add-praise-form').addEventListener('submit', (e) => {
                    e.preventDefault();
                    this.addPraiseRecord();
                });
                
                // 系统设置表单提交
                document.getElementById('settings-form').addEventListener('submit', (e) => {
                    e.preventDefault();
                    this.saveSettings();
                });
                
                // 生成报表按钮点击
                document.getElementById('generate-report-btn').addEventListener('click', () => {
                    this.generateReport();
                });
                
                // 导出报表按钮点击
                document.getElementById('export-report-btn').addEventListener('click', () => {
                    this.exportReport();
                });
                
                // 确认删除按钮点击
                document.getElementById('confirm-delete-btn').addEventListener('click', () => {
                    this.confirmDelete();
                });
                
                // 关闭模态框按钮点击
                document.querySelectorAll('.close-modal').forEach(btn => {
                    btn.addEventListener('click', () => {
                        document.querySelectorAll('.modal').forEach(modal => {
                            modal.style.display = 'none';
                        });
                    });
                });
                
                // 司机头像上传
                document.getElementById('driver-avatar').addEventListener('change', (e) => {
                    this.handleAvatarUpload(e);
                });
                
                // 违规条例选择变化
                document.getElementById('violation-rule').addEventListener('change', () => {
                    this.updateViolationScore();
                });
                
                // 表扬条例选择变化
                document.getElementById('praise-rule').addEventListener('change', () => {
                    this.updatePraiseScore();
                });
                
                // 司机搜索
                document.getElementById('driver-search').addEventListener('input', () => {
                    this.currentPageNumber = 1;
                    this.renderDrivers();
                });
                
                // 司机筛选
                document.getElementById('driver-filter').addEventListener('change', () => {
                    this.currentPageNumber = 1;
                    this.renderDrivers();
                });
                
                // 违规条例搜索
                document.getElementById('violation-search').addEventListener('input', () => {
                    this.renderViolationRules();
                });
                
                // 表扬条例搜索
                document.getElementById('praise-search').addEventListener('input', () => {
                    this.renderPraiseRules();
                });
                
                // 用户搜索
                document.getElementById('user-search').addEventListener('input', () => {
                    this.renderUsers();
                });
                
                // 记录违规按钮点击
                document.getElementById('add-violation-to-driver-btn').addEventListener('click', () => {
                    this.showAddViolationModal(this.currentDriverId);
                });
                
                // 记录表扬按钮点击
                document.getElementById('add-praise-to-driver-btn').addEventListener('click', () => {
                    this.showAddPraiseModal(this.currentDriverId);
                });
                
                // 从详情编辑司机按钮点击
                document.getElementById('edit-driver-from-detail-btn').addEventListener('click', () => {
                    this.showEditDriverModal(this.currentDriverId);
                    closeModal('driver-detail-modal');
                });
                
                // 违规统计卡片点击
                document.getElementById('violations-stat-card').addEventListener('click', () => {
                    this.showViolationDriversModal();
                });
                
                // 表扬统计卡片点击
                document.getElementById('praises-stat-card').addEventListener('click', () => {
                    this.showPraiseDriversModal();
                });
            },
            
            // 检查登录状态
            checkLoginStatus() {
                const token = localStorage.getItem('token');
                
                if (token) {
                    const userId = token;
                    const user = DataManager.getUser(userId);
                    
                    if (user) {
                        this.currentUser = user;
                        this.showMainPage();
                        this.adjustLayout(); // 初始化布局
                        return;
                    }
                }
                
                this.showLoginPage();
            },
            
            // 切换侧边栏显示/隐藏
            toggleSidebar() {
                const sidebar = document.querySelector('.sidebar');
                sidebar.classList.toggle('open');
            },
            
            // 调整布局
            adjustLayout() {
                const sidebar = document.querySelector('.sidebar');
                
                // 在小屏幕设备上默认隐藏侧边栏
                if (window.innerWidth <= 768) {
                    sidebar.classList.remove('open');
                } else {
                    sidebar.classList.add('open');
                }
            },
            
            // 显示登录页面
            showLoginPage() {
                document.getElementById('login-page').style.display = 'flex';
                document.getElementById('main-page').style.display = 'none';
            },
            
            // 显示主页面
            showMainPage() {
                document.getElementById('login-page').style.display = 'none';
                document.getElementById('main-page').style.display = 'block';
                
                // 更新用户信息
                document.getElementById('user-name').textContent = this.currentUser.username;
                document.getElementById('user-role').textContent = this.currentUser.role === 'super_admin' ? '超级管理员' : '管理员';
                
                // 根据权限显示菜单
                this.updateMenuPermissions();
                
                // 导航到默认页面
                this.navigateTo('dashboard');
            },
            
            // 更新菜单权限
            updateMenuPermissions() {
                const menuItems = document.querySelectorAll('.menu-item');
                
                menuItems.forEach(item => {
                    const target = item.dataset.target;
                    
                    // 超级管理员显示所有菜单
                    if (this.currentUser.role === 'super_admin') {
                        item.style.display = 'flex';
                        return;
                    }
                    
                    // 管理员根据权限显示菜单
                    if (this.currentUser.permissions && this.currentUser.permissions.includes(target)) {
                        item.style.display = 'flex';
                    } else {
                        item.style.display = 'none';
                    }
                });
            },
            
            // 导航到指定页面
            navigateTo(page) {
                // 更新当前页面
                this.currentPage = page;
                this.currentPageNumber = 1;
                
                // 更新菜单选中状态
                document.querySelectorAll('.menu-item').forEach(item => {
                    if (item.dataset.target === page) {
                        item.classList.add('active');
                    } else {
                        item.classList.remove('active');
                    }
                });
                
                // 显示对应页面
                document.querySelectorAll('.tab').forEach(tab => {
                    if (tab.id === page) {
                        tab.classList.add('active');
                    } else {
                        tab.classList.remove('active');
                    }
                });
                
                // 渲染页面内容
                switch (page) {
                    case 'dashboard':
                        this.renderDashboard();
                        break;
                    case 'driver-management':
                        this.renderDrivers();
                        break;
                    case 'violation-rules':
                        this.renderViolationRules();
                        break;
                    case 'praise-rules':
                        this.renderPraiseRules();
                        break;
                    case 'user-management':
                        this.renderUsers();
                        break;
                    case 'data-report':
                        this.renderDataReport();
                        break;
                    case 'settings':
                        this.renderSettings();
                        break;
                }
            },
            
            // 登录
            login() {
                showLoading();
                
                const username = document.getElementById('username').value;
                const password = document.getElementById('password').value;
                
                // 查找用户
                const user = DataManager.getUserByUsername(username);
                
                if (user && user.password === password) {
                    // 保存登录状态
                    localStorage.setItem('token', user.id);
                    this.currentUser = user;
                    
                    // 显示主页面
                    this.showMainPage();
                    showNotification('登录成功', 'success');
                } else {
                    showNotification('用户名或密码错误', 'error');
                }
                
                hideLoading();
            },
            
            // 注销
            logout() {
                // 清除登录状态
                localStorage.removeItem('token');
                this.currentUser = null;
                
                // 显示登录页面
                this.showLoginPage();
                showNotification('已成功注销', 'info');
            },
            
            // 渲染仪表盘
            renderDashboard() {
                showLoading();
                
                // 获取统计数据
                const drivers = DataManager.getUserManagedDrivers(this.currentUser.id);
                const violationRecords = DataManager.getViolationRecords();
                const praiseRecords = DataManager.getPraiseRecords();
                
                // 计算本月违规和表扬数
                const today = new Date();
                const monthStart = new Date(today.getFullYear(), today.getMonth(), 1);
                
                const monthlyViolations = violationRecords.filter(record => 
                    new Date(record.date) >= monthStart
                ).length;
                
                const monthlyPraises = praiseRecords.filter(record => 
                    new Date(record.date) >= monthStart
                ).length;
                
                // 计算平均评分
                const totalScore = drivers.reduce((sum, driver) => sum + driver.currentScore, 0);
                const averageScore = drivers.length > 0 ? (totalScore / drivers.length).toFixed(1) : 0;
                
                // 更新统计卡片
                document.getElementById('total-drivers').textContent = drivers.length;
                document.getElementById('total-violations').textContent = monthlyViolations;
                document.getElementById('total-praises').textContent = monthlyPraises;
                document.getElementById('average-score').textContent = averageScore;
                
                // 渲染评分分布图表
                this.renderScoreDistributionChart();
                
                // 渲染最近记录
                this.renderRecentRecords();
                
                hideLoading();
            },
            
            // 渲染评分分布图表
            renderScoreDistributionChart() {
                const distribution = DataManager.getScoreDistribution();
                
                const ctx = document.getElementById('score-distribution-chart').getContext('2d');
                
                // 销毁旧图表
                if (window.scoreDistributionChart) {
                    window.scoreDistributionChart.destroy();
                }
                
                // 创建新图表 - 改为雷达图
                window.scoreDistributionChart = new Chart(ctx, {
                    type: 'radar',
                    data: {
                        labels: distribution.map(item => item.label),
                        datasets: [{
                            label: '司机数量',
                            data: distribution.map(item => item.count),
                            backgroundColor: 'rgba(54, 162, 235, 0.2)',
                            borderColor: 'rgba(54, 162, 235, 1)',
                            borderWidth: 3,
                            pointBackgroundColor: 'rgba(54, 162, 235, 1)',
                            pointBorderColor: '#fff',
                            pointHoverBackgroundColor: '#fff',
                            pointHoverBorderColor: 'rgba(54, 162, 235, 1)',
                            pointRadius: 5,
                            pointHoverRadius: 8
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            r: {
                                angleLines: {
                                    color: 'rgba(0, 0, 0, 0.1)',
                                    lineWidth: 1
                                },
                                grid: {
                                    color: 'rgba(0, 0, 0, 0.1)',
                                    lineWidth: 1
                                },
                                pointLabels: {
                                    font: {
                                        size: 14,
                                        family: 'Inter, sans-serif',
                                        weight: 'bold'
                                    },
                                    color: '#374151',
                                    padding: 15
                                },
                                ticks: {
                                    backdropColor: 'rgba(255, 255, 255, 0.75)',
                                    color: '#6b7280',
                                    font: {
                                        size: 12
                                    },
                                    stepSize: 1,
                                    beginAtZero: true
                                }
                            }
                        },
                        plugins: {
                            legend: {
                                position: 'top',
                                labels: {
                                    font: {
                                        size: 14,
                                        family: 'Inter, sans-serif'
                                    },
                                    padding: 20,
                                    boxWidth: 15,
                                    usePointStyle: true,
                                    pointStyle: 'circle'
                                }
                            },
                            tooltip: {
                                backgroundColor: 'rgba(0, 0, 0, 0.7)',
                                titleFont: {
                                    size: 16,
                                    weight: 'bold'
                                },
                                bodyFont: {
                                    size: 14
                                },
                                padding: 12,
                                cornerRadius: 8,
                                callbacks: {
                                    label: function(context) {
                                        const label = context.dataset.label || '';
                                        const value = context.raw || 0;
                                        return `${label}: ${value}`;
                                    }
                                }
                            }
                        },
                        animation: {
                            animateRotate: true,
                            animateScale: true,
                            duration: 2000,
                            easing: 'easeOutQuart'
                        },
                        elements: {
                            line: {
                                tension: 0.2
                            }
                        }
                    }
                });
            },
            
            // 渲染最近记录
            renderRecentRecords() {
                // 传递当前用户信息给getRecentRecords方法
                const records = DataManager.getRecentRecords(10, this.currentUser);
                const tableBody = document.getElementById('recent-records-table');
                
                tableBody.innerHTML = '';
                
                if (records.length === 0) {
                    tableBody.innerHTML = `
                        <tr>
                            <td colspan="6" class="text-center py-4">暂无记录</td>
                        </tr>
                    `;
                    return;
                }
                
                records.forEach(record => {
                    const row = document.createElement('tr');
                    
                    row.innerHTML = `
                        <td>${record.driverName}</td>
                        <td>
                            <span class="badge ${record.type === 'violation' ? 'badge-danger' : 'badge-success'}">
                                ${record.type === 'violation' ? '违规' : '表扬'}
                            </span>
                        </td>
                        <td>${record.ruleName}</td>
                        <td>
                            <span class="${record.type === 'violation' ? 'text-danger' : 'text-success'}">
                                ${record.type === 'violation' ? '-' : '+'}${record.score}
                            </span>
                        </td>
                        <td>${record.operator || '未知'}</td>
                        <td>${formatDate(record.date)}</td>
                    `;
                    
                    tableBody.appendChild(row);
                });
            },
            
            // 渲染司机列表
            renderDrivers() {
                showLoading();
                
                const searchTerm = document.getElementById('driver-search').value.toLowerCase();
                const filter = document.getElementById('driver-filter').value;
                
                // 获取司机列表（考虑权限）
                let drivers = DataManager.getUserManagedDrivers(this.currentUser.id);
                
                // 搜索过滤
                if (searchTerm) {
                    drivers = drivers.filter(driver => 
                        driver.name.toLowerCase().includes(searchTerm) || 
                        driver.phone.includes(searchTerm) || 
                        driver.licenseNumber.includes(searchTerm)
                    );
                }
                
                // 评分过滤
                if (filter === 'high-score') {
                    drivers = drivers.filter(driver => driver.currentScore >= 8);
                } else if (filter === 'low-score') {
                    drivers = drivers.filter(driver => driver.currentScore < 8);
                }
                
                // 分页
                const totalPages = Math.ceil(drivers.length / this.itemsPerPage);
                const startIndex = (this.currentPageNumber - 1) * this.itemsPerPage;
                const endIndex = startIndex + this.itemsPerPage;
                const paginatedDrivers = drivers.slice(startIndex, endIndex);
                
                const tableBody = document.getElementById('drivers-table');
                tableBody.innerHTML = '';
                
                if (paginatedDrivers.length === 0) {
                    tableBody.innerHTML = `
                        <tr>
                            <td colspan="6" class="text-center py-4">暂无司机数据</td>
                        </tr>
                    `;
                } else {
                    paginatedDrivers.forEach(driver => {
                        const row = document.createElement('tr');
                        
                        row.innerHTML = `
                            <td data-label="头像">
                                <img src="${driver.avatar || 'https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/4cfdd08786ba461eae3220c3f4a0a8fe~tplv-a9rns2rl98-image.image?rcl=2025110614152671A2A3895168B006359A&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1765001781&x-signature=%2FF3BiuxjTPY7bLvkbUgT7NwE8V0%3D'}" alt="${driver.name}" class="avatar">
                            </td>
                            <td data-label="姓名">${driver.name}</td>
                            <td data-label="电话">${driver.phone}</td>
                            <td data-label="评分">
                                <div class="flex items-center">
                                    <span class="mr-2">${driver.currentScore}</span>
                                    <div class="rating-stars">
                                        ${generateStars(driver.currentScore, driver.totalScore)}
                                    </div>
                                </div>
                            </td>
                            <td data-label="保证金">${driver.currentScore >= DataManager.getSettings().penaltyThreshold ? '<span class="text-success">无需缴纳</span>' : `¥${driver.deposit}`}</td>
                            <td data-label="操作">
                                <div class="action-buttons">
                                    <button class="action-btn view" data-id="${driver.id}">
                                        <i class="fa fa-eye" aria-hidden="true"></i> 查看
                                    </button>
                                    <button class="action-btn edit" data-id="${driver.id}">
                                        <i class="fa fa-pencil" aria-hidden="true"></i> 编辑
                                    </button>
                                    <button class="action-btn violation" data-id="${driver.id}">
                                        <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> 违规
                                    </button>
                                    <button class="action-btn praise" data-id="${driver.id}">
                                        <i class="fa fa-thumbs-up" aria-hidden="true"></i> 表扬
                                    </button>
                                    <button class="action-btn delete" data-id="${driver.id}">
                                        <i class="fa fa-trash" aria-hidden="true"></i> 删除
                                    </button>
                                    ${driver.currentScore < DataManager.getSettings().penaltyThreshold ? '<span class="locked-permission">已锁权限</span>' : ''}
                                </div>
                            </td>
                        `;
                        
                        tableBody.appendChild(row);
                    });
                }
                
                // 渲染分页控件
                this.renderPagination('drivers-pagination', totalPages);
                
                // 绑定操作按钮事件
                document.querySelectorAll('.action-btn.view').forEach(btn => {
                    btn.addEventListener('click', () => {
                        const id = btn.dataset.id;
                        this.showDriverDetail(id);
                    });
                });
                
                document.querySelectorAll('.action-btn.edit').forEach(btn => {
                    btn.addEventListener('click', () => {
                        const id = btn.dataset.id;
                        this.showEditDriverModal(id);
                    });
                });
                
                document.querySelectorAll('.action-btn.delete').forEach(btn => {
                    btn.addEventListener('click', () => {
                        const id = btn.dataset.id;
                        this.showItemDeleteConfirm('driver', id);
                    });
                });
                
                // 记录违规按钮点击
                document.querySelectorAll('.action-btn.violation').forEach(btn => {
                    btn.addEventListener('click', () => {
                        const id = btn.dataset.id;
                        this.showAddViolationModal(id);
                    });
                });
                
                // 记录表扬按钮点击
                document.querySelectorAll('.action-btn.praise').forEach(btn => {
                    btn.addEventListener('click', () => {
                        const id = btn.dataset.id;
                        this.showAddPraiseModal(id);
                    });
                });
                
                hideLoading();
            },
            
            // 渲染分页控件
            renderPagination(containerId, totalPages) {
                const container = document.getElementById(containerId);
                container.innerHTML = '';
                
                if (totalPages <= 1) {
                    return;
                }
                
                // 上一页按钮
                const prevBtn = document.createElement('button');
                prevBtn.className = `pagination-btn ${this.currentPageNumber === 1 ? 'disabled' : ''}`;
                prevBtn.innerHTML = '<i class="fa fa-chevron-left" aria-hidden="true"></i>';
                prevBtn.addEventListener('click', () => {
                    if (this.currentPageNumber > 1) {
                        this.currentPageNumber--;
                        this.renderCurrentPage();
                    }
                });
                container.appendChild(prevBtn);
                
                // 页码按钮
                for (let i = 1; i <= totalPages; i++) {
                    const pageBtn = document.createElement('button');
                    pageBtn.className = `pagination-btn ${this.currentPageNumber === i ? 'active' : ''}`;
                    pageBtn.textContent = i;
                    pageBtn.addEventListener('click', () => {
                        this.currentPageNumber = i;
                        this.renderCurrentPage();
                    });
                    container.appendChild(pageBtn);
                }
                
                // 下一页按钮
                const nextBtn = document.createElement('button');
                nextBtn.className = `pagination-btn ${this.currentPageNumber === totalPages ? 'disabled' : ''}`;
                nextBtn.innerHTML = '<i class="fa fa-chevron-right" aria-hidden="true"></i>';
                nextBtn.addEventListener('click', () => {
                    if (this.currentPageNumber < totalPages) {
                        this.currentPageNumber++;
                        this.renderCurrentPage();
                    }
                });
                container.appendChild(nextBtn);
            },
            
            // 渲染当前页面
            renderCurrentPage() {
                switch (this.currentPage) {
                    case 'driver-management':
                        this.renderDrivers();
                        break;
                    // 其他页面需要分页时添加
                }
            },
            
            // 显示添加司机模态框
            showAddDriverModal() {
                const modal = document.getElementById('driver-modal');
                const title = document.getElementById('driver-modal-title');
                const form = document.getElementById('driver-form');
                
                // 重置表单
                form.reset();
                document.getElementById('driver-id').value = '';
                document.getElementById('driver-avatar-preview').src = 'https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/4cfdd08786ba461eae3220c3f4a0a8fe~tplv-a9rns2rl98-image.image?rcl=2025110614152671A2A3895168B006359A&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1765001781&x-signature=%2FF3BiuxjTPY7bLvkbUgT7NwE8V0%3D';
                
                // 设置标题
                title.textContent = '添加司机';
                
                // 设置初始评分（使用系统设置值）
                const settings = DataManager.getSettings();
                const scoreInput = document.getElementById('driver-score');
                const scoreReadonly = document.getElementById('score-readonly');
                
                // 动态设置评分输入框的最大值为系统设置的总分
                scoreInput.max = settings.totalScore;
                
                // 设置评分值为系统设置的总分
                scoreInput.value = settings.totalScore;
                scoreReadonly.textContent = settings.totalScore;
                
                // 处理评分和保证金字段显示
                this.handleScoreAndDepositDisplay();
                
                // 显示模态框
                showModal('driver-modal');
            },
            
            // 显示编辑司机模态框
            showEditDriverModal(id) {
                const driver = DataManager.getDriver(id);
                
                if (!driver) {
                    showNotification('未找到司机信息', 'error');
                    return;
                }
                
                const modal = document.getElementById('driver-modal');
                const title = document.getElementById('driver-modal-title');
                
                // 填充表单
                document.getElementById('driver-id').value = driver.id;
                document.getElementById('driver-name').value = driver.name;
                document.getElementById('driver-phone').value = driver.phone;
                document.getElementById('driver-score').value = driver.currentScore;
                document.getElementById('score-readonly').textContent = driver.currentScore;
                document.getElementById('driver-deposit').value = driver.deposit;
                document.getElementById('driver-avatar-preview').src = driver.avatar || 'https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/4cfdd08786ba461eae3220c3f4a0a8fe~tplv-a9rns2rl98-image.image?rcl=2025110614152671A2A3895168B006359A&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1765001781&x-signature=%2FF3BiuxjTPY7bLvkbUgT7NwE8V0%3D';
                
                // 动态设置评分输入框的最大值为系统设置的总分
                const settings = DataManager.getSettings();
                document.getElementById('driver-score').max = settings.totalScore;
                
                // 设置标题
                title.textContent = '编辑司机';
                
                // 处理评分和保证金字段显示
                this.handleScoreAndDepositDisplay();
                
                // 显示模态框
                showModal('driver-modal');
            },
            
            // 显示司机详情
            showDriverDetail(id) {
                const driver = DataManager.getDriver(id);
                
                if (!driver) {
                    showNotification('未找到司机信息', 'error');
                    return;
                }
                
                this.currentDriverId = id;
                
                const modal = document.getElementById('driver-detail-modal');
                const title = document.getElementById('driver-detail-title');
                
                // 填充详情
                title.textContent = `${driver.name} 详情`;
                document.getElementById('detail-avatar').src = driver.avatar || 'https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/4cfdd08786ba461eae3220c3f4a0a8fe~tplv-a9rns2rl98-image.image?rcl=2025110614152671A2A3895168B006359A&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1765001781&x-signature=%2FF3BiuxjTPY7bLvkbUgT7NwE8V0%3D';
                document.getElementById('detail-name').textContent = driver.name;
                document.getElementById('detail-phone').textContent = driver.phone;
                document.getElementById('detail-score').textContent = `${driver.currentScore}/${driver.totalScore}`;
                const settings = DataManager.getSettings();
                document.getElementById('detail-deposit').textContent = driver.currentScore >= settings.penaltyThreshold ? '无需缴纳' : `¥${driver.deposit}`;
                document.getElementById('detail-created').textContent = formatDate(driver.createdAt);
                document.getElementById('detail-updated').textContent = formatDate(driver.updatedAt);
                
                // 生成星级评分
                document.getElementById('detail-rating').innerHTML = generateStars(driver.currentScore, driver.totalScore);
                
                // 渲染违规记录（默认第一页）
                this.renderDriverViolationRecords(id, 1);
                
                // 渲染表扬记录（默认第一页）
                this.renderDriverPraiseRecords(id, 1);
                
                // 显示模态框
                showModal('driver-detail-modal');
            },
            
            // 显示违规人员列表模态框
            showViolationDriversModal() {
                showLoading();
                
                // 获取本月违规记录
                const today = new Date();
                const monthStart = new Date(today.getFullYear(), today.getMonth(), 1);
                
                // 获取当前用户管理的司机
                const managedDriverIds = this.currentUser.role === 'super_admin' ? 
                    [] : (this.currentUser.managedDrivers || []);
                
                // 获取所有违规记录
                let violationRecords = DataManager.getViolationRecords();
                
                // 如果是管理员，只显示其管理的司机的违规记录
                if (managedDriverIds.length > 0) {
                    violationRecords = violationRecords.filter(record => 
                        managedDriverIds.includes(record.driverId)
                    );
                }
                
                // 筛选本月的违规记录
                const monthlyViolations = violationRecords.filter(record => 
                    new Date(record.date) >= monthStart
                );
                
                // 按日期排序（最新的在前）
                monthlyViolations.sort((a, b) => new Date(b.date) - new Date(a.date));
                
                // 渲染违规人员列表
                const tableBody = document.getElementById('violation-drivers-table');
                tableBody.innerHTML = '';
                
                if (monthlyViolations.length === 0) {
                    tableBody.innerHTML = `
                        <tr>
                            <td colspan="6" class="text-center py-4">暂无违规记录</td>
                        </tr>
                    `;
                } else {
                    monthlyViolations.forEach(record => {
                        const driver = DataManager.getDriver(record.driverId);
                        const rule = DataManager.getViolationRule(record.violationId);
                        
                        const row = document.createElement('tr');
                        
                        // 获取操作人信息
                        const operator = DataManager.getUser(record.createdBy);
                        
                        row.innerHTML = `
                            <td>${driver ? driver.name : '未知司机'}</td>
                            <td>${rule ? rule.name : '未知违规'}</td>
                            <td class="text-danger">-${record.score}</td>
                            <td>${formatDate(record.date)}</td>
                            <td>${record.description || '无描述'}</td>
                            <td>${operator ? operator.username : '未知用户'}</td>
                        `;
                        
                        tableBody.appendChild(row);
                    });
                }
                
                // 显示模态框
                showModal('violation-drivers-modal');
                hideLoading();
            },
            
            // 显示表扬人员列表模态框
            showPraiseDriversModal() {
                showLoading();
                
                // 获取本月表扬记录
                const today = new Date();
                const monthStart = new Date(today.getFullYear(), today.getMonth(), 1);
                
                // 获取当前用户管理的司机
                const managedDriverIds = this.currentUser.role === 'super_admin' ? 
                    [] : (this.currentUser.managedDrivers || []);
                
                // 获取所有表扬记录
                let praiseRecords = DataManager.getPraiseRecords();
                
                // 如果是管理员，只显示其管理的司机的表扬记录
                if (managedDriverIds.length > 0) {
                    praiseRecords = praiseRecords.filter(record => 
                        managedDriverIds.includes(record.driverId)
                    );
                }
                
                // 筛选本月的表扬记录
                const monthlyPraises = praiseRecords.filter(record => 
                    new Date(record.date) >= monthStart
                );
                
                // 按日期排序（最新的在前）
                monthlyPraises.sort((a, b) => new Date(b.date) - new Date(a.date));
                
                // 渲染表扬人员列表
                const tableBody = document.getElementById('praise-drivers-table');
                tableBody.innerHTML = '';
                
                if (monthlyPraises.length === 0) {
                    tableBody.innerHTML = `
                        <tr>
                            <td colspan="6" class="text-center py-4">暂无表扬记录</td>
                        </tr>
                    `;
                } else {
                    monthlyPraises.forEach(record => {
                        const driver = DataManager.getDriver(record.driverId);
                        const rule = DataManager.getPraiseRule(record.praiseId);
                        
                        const row = document.createElement('tr');
                        
                        // 获取操作人信息
                        const operator = DataManager.getUser(record.createdBy);
                        
                        row.innerHTML = `
                            <td>${driver ? driver.name : '未知司机'}</td>
                            <td>${rule ? rule.name : '未知表扬'}</td>
                            <td class="text-success">+${record.score}</td>
                            <td>${formatDate(record.date)}</td>
                            <td>${record.description || '无描述'}</td>
                            <td>${operator ? operator.username : '未知用户'}</td>
                        `;
                        
                        tableBody.appendChild(row);
                    });
                }
                
                // 显示模态框
                showModal('praise-drivers-modal');
                hideLoading();
            },
            
            // 渲染司机违规记录
            renderDriverViolationRecords(driverId, page = 1) {
                const records = DataManager.getDriverViolationRecords(driverId);
                const container = document.getElementById('violation-records');
                const paginationContainer = document.getElementById('violation-pagination');
                const itemsPerPage = 2; // 每页显示2条记录
                
                container.innerHTML = '';
                paginationContainer.innerHTML = '';
                paginationContainer.classList.add('hidden');
                
                if (records.length === 0) {
                    container.innerHTML = '<p class="text-gray-500">暂无违规记录</p>';
                    return;
                }
                
                // 计算分页
                const totalPages = Math.ceil(records.length / itemsPerPage);
                const startIndex = (page - 1) * itemsPerPage;
                const endIndex = Math.min(startIndex + itemsPerPage, records.length);
                const paginatedRecords = records.slice(startIndex, endIndex);
                
                // 渲染当前页的记录
                paginatedRecords.forEach(record => {
                    const rule = DataManager.getViolationRule(record.violationId);
                    
                    const recordElement = document.createElement('div');
                    recordElement.className = 'violation-item';
                    
                    recordElement.innerHTML = `
                        <div class="record-header">
                            <span class="record-title">${rule ? rule.name : '未知违规'}</span>
                            <span class="record-score text-danger">-${record.score}</span>
                            <button class="delete-record-btn text-red-500 hover:text-red-700 ml-2" 
                                    data-record-id="${record.id}" 
                                    data-driver-id="${driverId}" 
                                    data-score="${record.score}">
                                <i class="fa fa-trash" aria-hidden="true"></i>
                            </button>
                        </div>
                        <div class="record-description">${record.description || '无描述'}</div>
                        <div class="record-date">${formatDate(record.date)}</div>
                    `;
                    
                    container.appendChild(recordElement);
                });
                
                // 如果超过一页，显示分页控件
                if (totalPages > 1) {
                    paginationContainer.classList.remove('hidden');
                    
                    // 创建上一页按钮
                    const prevBtn = document.createElement('button');
                    prevBtn.className = 'pagination-btn';
                    prevBtn.textContent = '上一页';
                    prevBtn.disabled = page === 1;
                    prevBtn.addEventListener('click', () => {
                        if (page > 1) {
                            this.renderDriverViolationRecords(driverId, page - 1);
                        }
                    });
                    paginationContainer.appendChild(prevBtn);
                    
                    // 创建页码按钮
                    for (let i = 1; i <= totalPages; i++) {
                        const pageBtn = document.createElement('button');
                        pageBtn.className = `pagination-btn ${i === page ? 'active' : ''}`;
                        pageBtn.textContent = i;
                        pageBtn.addEventListener('click', () => {
                            this.renderDriverViolationRecords(driverId, i);
                        });
                        paginationContainer.appendChild(pageBtn);
                    }
                    
                    // 创建下一页按钮
                    const nextBtn = document.createElement('button');
                    nextBtn.className = 'pagination-btn';
                    nextBtn.textContent = '下一页';
                    nextBtn.disabled = page === totalPages;
                    nextBtn.addEventListener('click', () => {
                        if (page < totalPages) {
                            this.renderDriverViolationRecords(driverId, page + 1);
                        }
                    });
                    paginationContainer.appendChild(nextBtn);
                }
                
                // 添加删除按钮事件
                document.querySelectorAll('.delete-record-btn').forEach(btn => {
                    btn.addEventListener('click', (e) => {
                        const recordId = e.currentTarget.dataset.recordId;
                        const driverId = e.currentTarget.dataset.driverId;
                        const score = parseFloat(e.currentTarget.dataset.score);
                        
                        this.showDeleteViolationRecordModal(recordId, driverId, score, page);
                    });
                });
            },
            
            // 渲染司机表扬记录
            renderDriverPraiseRecords(driverId, page = 1) {
                const records = DataManager.getDriverPraiseRecords(driverId);
                const container = document.getElementById('praise-records');
                const paginationContainer = document.getElementById('praise-pagination');
                const itemsPerPage = 2; // 每页显示2条记录
                
                container.innerHTML = '';
                paginationContainer.innerHTML = '';
                paginationContainer.classList.add('hidden');
                
                if (records.length === 0) {
                    container.innerHTML = '<p class="text-gray-500">暂无表扬记录</p>';
                    return;
                }
                
                // 计算分页
                const totalPages = Math.ceil(records.length / itemsPerPage);
                const startIndex = (page - 1) * itemsPerPage;
                const endIndex = Math.min(startIndex + itemsPerPage, records.length);
                const paginatedRecords = records.slice(startIndex, endIndex);
                
                // 渲染当前页的记录
                paginatedRecords.forEach(record => {
                    const rule = DataManager.getPraiseRule(record.praiseId);
                    
                    const recordElement = document.createElement('div');
                    recordElement.className = 'praise-item';
                    
                    // 检查当前用户是否有权限删除此记录
                    const canDelete = this.currentUser.role === 'super_admin' || record.createdBy === this.currentUser.id;
                    
                    recordElement.innerHTML = `
                        <div class="record-header">
                            <span class="record-title">${rule ? rule.name : '未知表扬'}</span>
                            <span class="record-score text-success">+${record.score}</span>
                            ${canDelete ? `
                                <button class="delete-praise-record-btn text-red-500 hover:text-red-700 ml-2" 
                                        data-record-id="${record.id}" 
                                        data-driver-id="${driverId}" 
                                        data-score="${record.score}">
                                    <i class="fa fa-trash" aria-hidden="true"></i>
                                </button>
                            ` : ''}
                        </div>
                        <div class="record-description">${record.description || '无描述'}</div>
                        <div class="record-date">${formatDate(record.date)}</div>
                    `;
                    
                    container.appendChild(recordElement);
                });
                
                // 如果超过一页，显示分页控件
                if (totalPages > 1) {
                    paginationContainer.classList.remove('hidden');
                    
                    // 创建上一页按钮
                    const prevBtn = document.createElement('button');
                    prevBtn.className = 'pagination-btn';
                    prevBtn.textContent = '上一页';
                    prevBtn.disabled = page === 1;
                    prevBtn.addEventListener('click', () => {
                        if (page > 1) {
                            this.renderDriverPraiseRecords(driverId, page - 1);
                        }
                    });
                    paginationContainer.appendChild(prevBtn);
                    
                    // 创建页码按钮
                    for (let i = 1; i <= totalPages; i++) {
                        const pageBtn = document.createElement('button');
                        pageBtn.className = `pagination-btn ${i === page ? 'active' : ''}`;
                        pageBtn.textContent = i;
                        pageBtn.addEventListener('click', () => {
                            this.renderDriverPraiseRecords(driverId, i);
                        });
                        paginationContainer.appendChild(pageBtn);
                    }
                    
                    // 创建下一页按钮
                    const nextBtn = document.createElement('button');
                    nextBtn.className = 'pagination-btn';
                    nextBtn.textContent = '下一页';
                    nextBtn.disabled = page === totalPages;
                    nextBtn.addEventListener('click', () => {
                        if (page < totalPages) {
                            this.renderDriverPraiseRecords(driverId, page + 1);
                        }
                    });
                    paginationContainer.appendChild(nextBtn);
                }
                
                // 添加删除按钮事件
                document.querySelectorAll('.delete-praise-record-btn').forEach(btn => {
                    btn.addEventListener('click', (e) => {
                        const recordId = e.currentTarget.dataset.recordId;
                        const driverId = e.currentTarget.dataset.driverId;
                        const score = parseFloat(e.currentTarget.dataset.score);
                        
                        this.showDeletePraiseRecordModal(recordId, driverId, score, page);
                    });
                });
            },
            
            // 显示删除违规记录确认
            showDeleteViolationRecordModal(recordId, driverId, score, page = 1) {
                this.showDeleteConfirm(
                    `确定要删除此违规记录吗？删除后将自动恢复司机 ${score} 分。`,
                    () => this.deleteViolationRecord(recordId, driverId, score, page)
                );
            },
            
            // 显示删除表扬记录确认
            showDeletePraiseRecordModal(recordId, driverId, score, page = 1) {
                this.showDeleteConfirm(
                    `确定要删除此表扬记录吗？删除后将扣除司机 ${score} 分。`,
                    () => this.deletePraiseRecord(recordId, driverId, score, page)
                );
            },
            
            // 删除违规记录
            deleteViolationRecord(recordId, driverId, score, page = 1) {
                showLoading();
                
                try {
                    // 删除违规记录
                    DataManager.deleteViolationRecord(recordId);
                    
                    // 获取司机
                    const driver = DataManager.getDriver(driverId);
                    
                    if (driver) {
                        // 恢复司机分数
                        driver.currentScore = Math.min(driver.currentScore + score, driver.totalScore);
                        driver.updatedAt = new Date().toISOString();
                        
                        // 更新司机信息
                        DataManager.updateDriver(driverId, {
                            currentScore: driver.currentScore,
                            updatedAt: driver.updatedAt
                        });
                        
                        // 更新仪表盘
                        this.updateDashboard();
                        
                        // 重新渲染司机详情
                        this.showDriverDetail(driverId);
                        
                        // 重新渲染当前页的违规记录
                        setTimeout(() => {
                            this.renderDriverViolationRecords(driverId, page);
                        }, 0);
                    }
                    
                    showNotification('违规记录已删除，司机分数已恢复', 'success');
                } catch (error) {
                    showNotification('删除违规记录失败：' + error.message, 'error');
                } finally {
                    hideLoading();
                }
            },
            
            // 删除表扬记录
            deletePraiseRecord(recordId, driverId, score, page = 1) {
                showLoading();
                
                try {
                    // 获取表扬记录
                    const praiseRecords = DataManager.getPraiseRecords();
                    const record = praiseRecords.find(r => r.id === recordId);
                    
                    if (!record) {
                        throw new Error('未找到表扬记录');
                    }
                    
                    // 检查权限
                    if (this.currentUser.role !== 'super_admin' && record.createdBy !== this.currentUser.id) {
                        throw new Error('您没有权限删除此记录');
                    }
                    
                    // 删除表扬记录
                    const success = DataManager.deletePraiseRecord(recordId);
                    
                    if (!success) {
                        throw new Error('删除表扬记录失败');
                    }
                    
                    // 获取司机
                    const driver = DataManager.getDriver(driverId);
                    
                    if (driver) {
                        // 扣除司机分数
                        driver.currentScore = Math.max(driver.currentScore - score, 0);
                        driver.updatedAt = new Date().toISOString();
                        
                        // 更新司机信息
                        DataManager.updateDriver(driverId, {
                            currentScore: driver.currentScore,
                            updatedAt: driver.updatedAt
                        });
                        
                        // 更新仪表盘
                        this.updateDashboard();
                        
                        // 重新渲染司机详情
                        this.showDriverDetail(driverId);
                        
                        // 重新渲染当前页的表扬记录
                        setTimeout(() => {
                            this.renderDriverPraiseRecords(driverId, page);
                        }, 0);
                    }
                    
                    showNotification('表扬记录已删除，司机分数已更新', 'success');
                } catch (error) {
                    showNotification('删除表扬记录失败：' + error.message, 'error');
                } finally {
                    hideLoading();
                }
            },
            
            // 保存司机
            saveDriver() {
                showLoading();
                
                const id = document.getElementById('driver-id').value;
                const name = document.getElementById('driver-name').value;
                const phone = document.getElementById('driver-phone').value;
                const currentScore = parseFloat(document.getElementById('driver-score').value);
                const avatar = document.getElementById('driver-avatar-preview').src;
                
                // 处理保证金
                const settings = DataManager.getSettings();
                let deposit = 0;
                
                // 如果评分低于处罚阈值，使用系统设置的保证金金额
                if (currentScore < settings.penaltyThreshold) {
                    deposit = settings.depositAmount;
                }
                
                const driverData = {
                    name,
                    phone,
                    currentScore,
                    deposit,
                    avatar
                };
                
                try {
                    if (id) {
                        // 更新司机
                        DataManager.updateDriver(id, driverData);
                        showNotification('司机信息已更新', 'success');
                    } else {
                        // 添加司机
                        const newDriver = DataManager.addDriver(driverData);
                        
                        // 如果是管理员，将新司机添加到其管理列表中
                        if (this.currentUser.role !== 'super_admin') {
                            // 获取当前用户
                            const currentUser = DataManager.getUser(this.currentUser.id);
                            
                            // 初始化managedDrivers数组（如果不存在）
                            if (!currentUser.managedDrivers) {
                                currentUser.managedDrivers = [];
                            }
                            
                            // 添加新司机ID到管理列表
                            currentUser.managedDrivers.push(newDriver.id);
                            
                            // 更新用户信息
                            DataManager.updateUser(currentUser.id, {
                                managedDrivers: currentUser.managedDrivers
                            });
                        }
                        
                        showNotification('司机添加成功', 'success');
                    }
                    
                    // 关闭模态框
                    closeModal('driver-modal');
                    
                    // 重新渲染司机列表
                    this.renderDrivers();
                } catch (error) {
                    showNotification(error.message, 'error');
                }
                
                hideLoading();
            },
            
            // 处理头像上传
            handleAvatarUpload(e) {
                const file = e.target.files[0];
                
                if (file) {
                    const reader = new FileReader();
                    
                    reader.onload = function(event) {
                        document.getElementById('driver-avatar-preview').src = event.target.result;
                    };
                    
                    reader.readAsDataURL(file);
                }
            },
            
            // 处理评分和保证金字段显示
            handleScoreAndDepositDisplay() {
                const scoreInput = document.getElementById('driver-score');
                const scoreReadonly = document.getElementById('score-readonly');
                const depositFieldGroup = document.getElementById('deposit-field-group');
                const depositInput = document.getElementById('driver-deposit');
                const settings = DataManager.getSettings();
                
                // 检查是否是编辑模式（有司机ID）
                const isEditMode = !!document.getElementById('driver-id').value;
                
                if (isEditMode) {
                    // 编辑模式下，管理员不能修改评分
                    if (this.currentUser.role !== 'super_admin') {
                        scoreInput.style.display = 'none';
                        scoreReadonly.style.display = 'block';
                    } else {
                        scoreInput.style.display = 'block';
                        scoreReadonly.style.display = 'none';
                    }
                } else {
                    // 添加模式下
                    if (this.currentUser.role !== 'super_admin') {
                        // 管理员不能修改评分，使用系统设置值
                        scoreInput.style.display = 'none';
                        scoreReadonly.style.display = 'block';
                    } else {
                        // 超级管理员可以修改评分
                        scoreInput.style.display = 'block';
                        scoreReadonly.style.display = 'none';
                    }
                }
                
                // 检查是否需要显示保证金字段
                const currentScore = parseFloat(scoreInput.value) || 0;
                const needsDeposit = currentScore < settings.penaltyThreshold;
                
                if (needsDeposit) {
                    // 需要缴纳保证金，显示字段
                    depositFieldGroup.style.display = 'block';
                    
                    // 如果是管理员或编辑模式，设置为只读
                    if (this.currentUser.role !== 'super_admin' || isEditMode) {
                        depositInput.disabled = true;
                        // 从系统设置中获取保证金金额
                        depositInput.value = settings.depositAmount;
                    } else {
                        depositInput.disabled = false;
                    }
                } else {
                    // 不需要缴纳保证金，隐藏字段
                    depositFieldGroup.style.display = 'none';
                    // 设置保证金为0
                    depositInput.value = 0;
                }
                
                // 添加评分变化事件监听
                scoreInput.addEventListener('change', () => {
                    // 更新只读显示的值
                    scoreReadonly.textContent = scoreInput.value;
                    // 更新保证金字段
                    this.handleScoreAndDepositDisplay();
                });
            },
            
            // 渲染违规条例列表
            renderViolationRules() {
                showLoading();
                
                const searchTerm = document.getElementById('violation-search').value.toLowerCase();
                const rules = DataManager.getViolationRules();
                
                // 搜索过滤
                const filteredRules = searchTerm ? 
                    rules.filter(rule => rule.name.toLowerCase().includes(searchTerm) || rule.description.toLowerCase().includes(searchTerm)) : 
                    rules;
                
                const tableBody = document.getElementById('violations-table');
                tableBody.innerHTML = '';
                
                if (filteredRules.length === 0) {
                    tableBody.innerHTML = `
                        <tr>
                            <td colspan="4" class="text-center py-4">暂无违规条例数据</td>
                        </tr>
                    `;
                } else {
                    filteredRules.forEach(rule => {
                        const row = document.createElement('tr');
                        
                        row.innerHTML = `
                            <td>${rule.name}</td>
                            <td>${rule.description}</td>
                            <td class="text-danger">-${rule.score}</td>
                            <td>
                                <div class="action-buttons">
                                    <button class="action-btn edit" data-id="${rule.id}">
                                        <i class="fa fa-pencil" aria-hidden="true"></i> 编辑
                                    </button>
                                    <button class="action-btn delete" data-id="${rule.id}">
                                        <i class="fa fa-trash" aria-hidden="true"></i> 删除
                                    </button>
                                </div>
                            </td>
                        `;
                        
                        tableBody.appendChild(row);
                    });
                }
                
                // 绑定操作按钮事件
                document.querySelectorAll('#violations-table .action-btn.edit').forEach(btn => {
                    btn.addEventListener('click', () => {
                        const id = btn.dataset.id;
                        this.showEditViolationRuleModal(id);
                    });
                });
                
                document.querySelectorAll('#violations-table .action-btn.delete').forEach(btn => {
                    btn.addEventListener('click', () => {
                        const id = btn.dataset.id;
                        this.showItemDeleteConfirm('violationRule', id);
                    });
                });
                
                hideLoading();
            },
            
            // 显示添加违规条例模态框
            showAddViolationRuleModal() {
                const modal = document.getElementById('violation-rule-modal');
                const title = document.getElementById('violation-rule-modal-title');
                const form = document.getElementById('violation-rule-form');
                
                // 重置表单
                form.reset();
                document.getElementById('violation-rule-id').value = '';
                
                // 动态设置评分输入框的最大值为系统设置的总分
                const settings = DataManager.getSettings();
                document.getElementById('violation-rule-score').max = settings.totalScore;
                
                // 设置标题
                title.textContent = '添加违规規条例';
                
                // 显示模态框
                showModal('violation-rule-modal');
            },
            
            // 显示编辑违规条例模态框
            showEditViolationRuleModal(id) {
                const rule = DataManager.getViolationRule(id);
                
                if (!rule) {
                    showNotification('未找到违规条例', 'error');
                    return;
                }
                
                const modal = document.getElementById('violation-rule-modal');
                const title = document.getElementById('violation-rule-modal-title');
                
                // 填充表单
                document.getElementById('violation-rule-id').value = rule.id;
                document.getElementById('violation-rule-name').value = rule.name;
                document.getElementById('violation-rule-description').value = rule.description;
                document.getElementById('violation-rule-score').value = rule.score;
                
                // 动态设置评分输入框的最大值为系统设置的总分
                const settings = DataManager.getSettings();
                document.getElementById('violation-rule-score').max = settings.totalScore;
                
                // 设置标题
                title.textContent = '编辑违规条例';
                
                // 显示模态框
                showModal('violation-rule-modal');
            },
            
            // 保存违规条例
            saveViolationRule() {
                showLoading();
                
                const id = document.getElementById('violation-rule-id').value;
                const name = document.getElementById('violation-rule-name').value;
                const description = document.getElementById('violation-rule-description').value;
                const score = parseFloat(document.getElementById('violation-rule-score').value);
                
                const ruleData = {
                    name,
                    description,
                    score
                };
                
                try {
                    if (id) {
                        // 更新违规条例
                        DataManager.updateViolationRule(id, ruleData);
                        showNotification('违规条例已更新', 'success');
                    } else {
                        // 添加违规条例
                        DataManager.addViolationRule(ruleData);
                        showNotification('违规条例添加成功', 'success');
                    }
                    
                    // 关闭模态框
                    closeModal('violation-rule-modal');
                    
                    // 重新渲染违规条例列表
                    this.renderViolationRules();
                } catch (error) {
                    showNotification(error.message, 'error');
                }
                
                hideLoading();
            },
            
            // 渲染表扬条例列表
            renderPraiseRules() {
                showLoading();
                
                const searchTerm = document.getElementById('praise-search').value.toLowerCase();
                const rules = DataManager.getPraiseRules();
                
                // 搜索过滤
                const filteredRules = searchTerm ? 
                    rules.filter(rule => rule.name.toLowerCase().includes(searchTerm) || rule.description.toLowerCase().includes(searchTerm)) : 
                    rules;
                
                const tableBody = document.getElementById('praises-table');
                tableBody.innerHTML = '';
                
                if (filteredRules.length === 0) {
                    tableBody.innerHTML = `
                        <tr>
                            <td colspan="4" class="text-center py-4">暂无表扬条例数据</td>
                        </tr>
                    `;
                } else {
                    filteredRules.forEach(rule => {
                        const row = document.createElement('tr');
                        
                        row.innerHTML = `
                            <td>${rule.name}</td>
                            <td>${rule.description}</td>
                            <td class="text-success">+${rule.score}</td>
                            <td>
                                <div class="action-buttons">
                                    <button class="action-btn edit" data-id="${rule.id}">
                                        <i class="fa fa-pencil" aria-hidden="true"></i> 编辑
                                    </button>
                                    <button class="action-btn delete" data-id="${rule.id}">
                                        <i class="fa fa-trash" aria-hidden="true"></i> 删除
                                    </button>
                                </div>
                            </td>
                        `;
                        
                        tableBody.appendChild(row);
                    });
                }
                
                // 绑定操作按钮事件
                document.querySelectorAll('#praises-table .action-btn.edit').forEach(btn => {
                    btn.addEventListener('click', () => {
                        const id = btn.dataset.id;
                        this.showEditPraiseRuleModal(id);
                    });
                });
                
                document.querySelectorAll('#praises-table .action-btn.delete').forEach(btn => {
                    btn.addEventListener('click', () => {
                        const id = btn.dataset.id;
                        this.showItemDeleteConfirm('praiseRule', id);
                    });
                });
                
                hideLoading();
            },
            
            // 显示添加表扬条例模态框
            showAddPraiseRuleModal() {
                const modal = document.getElementById('praise-rule-modal');
                const title = document.getElementById('praise-rule-modal-title');
                const form = document.getElementById('praise-rule-form');
                
                // 重置表单
                form.reset();
                document.getElementById('praise-rule-id').value = '';
                
                // 动态设置评分输入框的最大值为系统设置的总分
                const settings = DataManager.getSettings();
                document.getElementById('praise-rule-score').max = settings.totalScore;
                
                // 设置标题
                title.textContent = '添加表扬条例';
                
                // 显示模态框
                showModal('praise-rule-modal');
            },
            
            // 显示编辑表扬条例模态框
            showEditPraiseRuleModal(id) {
                const rule = DataManager.getPraiseRule(id);
                
                if (!rule) {
                    showNotification('未找到表扬条例', 'error');
                    return;
                }
                
                const modal = document.getElementById('praise-rule-modal');
                const title = document.getElementById('praise-rule-modal-title');
                
                // 填充表单
                document.getElementById('praise-rule-id').value = rule.id;
                document.getElementById('praise-rule-name').value = rule.name;
                document.getElementById('praise-rule-description').value = rule.description;
                document.getElementById('praise-rule-score').value = rule.score;
                
                // 动态设置评分输入框的最大值为系统设置的总分
                const settings = DataManager.getSettings();
                document.getElementById('praise-rule-score').max = settings.totalScore;
                
                // 设置标题
                title.textContent = '编辑表扬条例';
                
                // 显示模态框
                showModal('praise-rule-modal');
            },
            
            // 保存表扬条例
            savePraiseRule() {
                showLoading();
                
                const id = document.getElementById('praise-rule-id').value;
                const name = document.getElementById('praise-rule-name').value;
                const description = document.getElementById('praise-rule-description').value;
                const score = parseFloat(document.getElementById('praise-rule-score').value);
                
                const ruleData = {
                    name,
                    description,
                    score
                };
                
                try {
                    if (id) {
                        // 更新表扬条例
                        DataManager.updatePraiseRule(id, ruleData);
                        showNotification('表扬条例已更新', 'success');
                    } else {
                        // 添加表扬条例
                        DataManager.addPraiseRule(ruleData);
                        showNotification('表扬条例添加成功', 'success');
                    }
                    
                    // 关闭模态框
                    closeModal('praise-rule-modal');
                    
                    // 重新渲染表扬条例列表
                    this.renderPraiseRules();
                } catch (error) {
                    showNotification(error.message, 'error');
                }
                
                hideLoading();
            },
            
            // 渲染用户列表
            renderUsers() {
                showLoading();
                
                // 只有超级管理员可以查看用户管理
                if (this.currentUser.role !== 'super_admin') {
                    document.getElementById('user-management').innerHTML = `
                        <div class="no-data">
                            <i class="fa fa-lock" aria-hidden="true"></i>
                            <p>您没有权限访问此页面</p>
                        </div>
                    `;
                    hideLoading();
                    return;
                }
                
                const searchTerm = document.getElementById('user-search').value.toLowerCase();
                const users = DataManager.getUsers();
                
                // 搜索过滤
                const filteredUsers = searchTerm ? 
                    users.filter(user => user.username.toLowerCase().includes(searchTerm)) : 
                    users;
                
                const tableBody = document.getElementById('users-table');
                tableBody.innerHTML = '';
                
                if (filteredUsers.length === 0) {
                    tableBody.innerHTML = `
                        <tr>
                            <td colspan="5" class="text-center py-4">暂无用户数据</td>
                        </tr>
                    `;
                } else {
                    filteredUsers.forEach(user => {
                        // 计算管理的司机数量
                        const managedDriverCount = user.managedDrivers ? user.managedDrivers.length : 0;
                        
                        const row = document.createElement('tr');
                        
                        row.innerHTML = `
                            <td>${user.username}</td>
                            <td>
                                <span class="badge ${user.role === 'super_admin' ? 'badge-info' : 'badge-success'}">
                                    ${user.role === 'super_admin' ? '超级管理员' : '管理员'}
                                </span>
                            </td>
                            <td>${managedDriverCount}</td>
                            <td>${formatDate(user.createdAt)}</td>
                            <td>
                                <div class="action-buttons">
                                    <button class="action-btn edit" data-id="${user.id}">
                                        <i class="fa fa-pencil" aria-hidden="true"></i> 编辑
                                    </button>
                                    ${user.role !== 'super_admin' ? `
                                        <button class="action-btn delete" data-id="${user.id}" data-type="user">
                                            <i class="fa fa-trash" aria-hidden="true"></i> 删除
                                        </button>
                                    ` : ''}
                                </div>
                            </td>
                        `;
                        
                        tableBody.appendChild(row);
                    });
                }
                
                // 绑定操作按钮事件
                document.querySelectorAll('#users-table .action-btn.edit').forEach(btn => {
                    btn.addEventListener('click', () => {
                        const id = btn.dataset.id;
                        this.showEditUserModal(id);
                    });
                });
                
                document.querySelectorAll('#users-table .action-btn.delete').forEach(btn => {
                    btn.addEventListener('click', () => {
                        const id = btn.dataset.id;
                        this.showItemDeleteConfirm('user', id);
                    });
                });
                
                hideLoading();
            },
            
            // 显示添加用户模态框
            showAddUserModal() {
                // 只有超级管理员可以添加用户
                if (this.currentUser.role !== 'super_admin') {
                    showNotification('您没有权限执行此操作', 'error');
                    return;
                }
                
                const modal = document.getElementById('user-modal');
                const title = document.getElementById('user-modal-title');
                const form = document.getElementById('user-form');
                
                // 重置表单
                form.reset();
                document.getElementById('user-id').value = '';
                
                // 设置标题
                title.textContent = '添加用户';
                
                // 填充司机列表
                this.populateDriverList();
                
                // 显示模态框
                showModal('user-modal');
            },
            
            // 显示编辑用户模态框
            showEditUserModal(id) {
                // 只有超级管理员可以编辑用户
                if (this.currentUser.role !== 'super_admin') {
                    showNotification('您没有权限执行此操作', 'error');
                    return;
                }
                
                const user = DataManager.getUser(id);
                
                if (!user) {
                    showNotification('未找到用户信息', 'error');
                    return;
                }
                
                const modal = document.getElementById('user-modal');
                const title = document.getElementById('user-modal-title');
                
                // 填充表单
                document.getElementById('user-id').value = user.id;
                document.getElementById('user-username').value = user.username;
                document.getElementById('user-username').disabled = user.role === 'super_admin'; // 超级管理员用户名不可修改
                document.getElementById('user-password').value = ''; // 密码留空表示不修改
                document.getElementById('user-role').value = user.role;
                
                // 设置权限复选框
                document.querySelectorAll('input[name="permissions"]').forEach(checkbox => {
                    checkbox.checked = user.permissions && user.permissions.includes(checkbox.value);
                    // 超级管理员权限不可修改
                    checkbox.disabled = user.role === 'super_admin';
                });
                
                // 填充司机列表
                this.populateDriverList(user.managedDrivers);
                
                // 设置标题
                title.textContent = '编辑用户';
                
                // 显示模态框
                showModal('user-modal');
            },
            
            // 填充司机列表
            populateDriverList(selectedDrivers = []) {
                const drivers = DataManager.getDrivers();
                const container = document.getElementById('user-drivers-list');
                
                container.innerHTML = '';
                
                if (drivers.length === 0) {
                    container.innerHTML = '<p class="text-gray-500">暂无司机数据</p>';
                    return;
                }
                
                drivers.forEach(driver => {
                    const driverItem = document.createElement('div');
                    driverItem.className = 'driver-item';
                    
                    driverItem.innerHTML = `
                        <input type="checkbox" id="driver-${driver.id}" name="managedDrivers" value="${driver.id}" ${selectedDrivers.includes(driver.id) ? 'checked' : ''}>
                        <label for="driver-${driver.id}" class="driver-info">
                            <div class="driver-name">${driver.name}</div>
                            <div class="driver-score">评分: ${driver.currentScore}/${driver.totalScore}</div>
                        </label>
                    `;
                    
                    container.appendChild(driverItem);
                });
            },
            
            // 保存用户
            saveUser() {
                showLoading();
                
                // 只有超级管理员可以保存用户
                if (this.currentUser.role !== 'super_admin') {
                    showNotification('您没有权限执行此操作', 'error');
                    hideLoading();
                    return;
                }
                
                const id = document.getElementById('user-id').value;
                const username = document.getElementById('user-username').value;
                const password = document.getElementById('user-password').value;
                const role = document.getElementById('user-role').value;
                
                // 获取选中的权限
                const permissions = [];
                document.querySelectorAll('input[name="permissions"]:checked').forEach(checkbox => {
                    permissions.push(checkbox.value);
                });
                
                // 获取选中的司机
                const managedDrivers = [];
                document.querySelectorAll('input[name="managedDrivers"]:checked').forEach(checkbox => {
                    managedDrivers.push(checkbox.value);
                });
                
                const userData = {
                    username,
                    role,
                    permissions,
                    managedDrivers
                };
                
                // 如果密码不为空，则更新密码
                if (password) {
                    userData.password = password;
                }
                
                try {
                    if (id) {
                        // 更新用户
                        DataManager.updateUser(id, userData);
                        showNotification('用户信息已更新', 'success');
                    } else {
                        // 添加用户
                        DataManager.addUser(userData);
                        showNotification('用户添加成功', 'success');
                    }
                    
                    // 关闭模态框
                    closeModal('user-modal');
                    
                    // 重新渲染用户列表
                    this.renderUsers();
                } catch (error) {
                    showNotification(error.message, 'error');
                }
                
                hideLoading();
            },
            
            // 显示添加违规记录模态框
            showAddViolationModal(driverId) {
                const driver = DataManager.getDriver(driverId);
                
                if (!driver) {
                    showNotification('未找到司机信息', 'error');
                    return;
                }
                
                const modal = document.getElementById('add-violation-modal');
                
                // 填充司机ID
                document.getElementById('violation-driver-id').value = driverId;
                
                // 填充违规条例下拉框
                this.populateViolationRules();
                
                // 设置默认日期为今天
                const today = new Date();
                const dateString = today.toISOString().split('T')[0];
                document.getElementById('violation-date').value = dateString;
                
                // 显示模态框
                showModal('add-violation-modal');
            },
            
            // 填充违规条例下拉框
            populateViolationRules() {
                const rules = DataManager.getViolationRules();
                const select = document.getElementById('violation-rule');
                
                select.innerHTML = '';
                
                if (rules.length === 0) {
                    select.innerHTML = '<option value="">暂无违规条例</option>';
                    return;
                }
                
                rules.forEach(rule => {
                    const option = document.createElement('option');
                    option.value = rule.id;
                    option.textContent = `${rule.name} (-${rule.score}分)`;
                    option.dataset.score = rule.score;
                    
                    select.appendChild(option);
                });
                
                // 更新扣分值
                this.updateViolationScore();
            },
            
            // 更新违规扣分值
            updateViolationScore() {
                const select = document.getElementById('violation-rule');
                const scoreInput = document.getElementById('violation-score');
                
                const selectedOption = select.options[select.selectedIndex];
                const score = selectedOption ? selectedOption.dataset.score : '';
                
                scoreInput.value = score;
            },
            
            // 添加违规记录
            addViolationRecord() {
                showLoading();
                
                const driverId = document.getElementById('violation-driver-id').value;
                const violationId = document.getElementById('violation-rule').value;
                const score = parseFloat(document.getElementById('violation-score').value);
                const description = document.getElementById('violation-description').value;
                const date = document.getElementById('violation-date').value;
                
                const recordData = {
                    driverId,
                    violationId,
                    score,
                    description,
                    date,
                    createdBy: this.currentUser.id
                };
                
                try {
                    // 添加违规记录
                    DataManager.addViolationRecord(recordData);
                    showNotification('违规记录已添加', 'success');
                    
                    // 关闭模态框
                    closeModal('add-violation-modal');
                    
                    // 如果当前在司机详情页，刷新详情
                    if (this.currentDriverId === driverId) {
                        this.showDriverDetail(driverId);
                    }
                    
                    // 刷新仪表盘
                    if (this.currentPage === 'dashboard') {
                        this.renderDashboard();
                    }
                } catch (error) {
                    showNotification(error.message, 'error');
                }
                
                hideLoading();
            },
            
            // 显示添加表扬记录模态框
            showAddPraiseModal(driverId) {
                const driver = DataManager.getDriver(driverId);
                
                if (!driver) {
                    showNotification('未找到司机信息', 'error');
                    return;
                }
                
                const modal = document.getElementById('add-praise-modal');
                
                // 填充司机ID
                document.getElementById('praise-driver-id').value = driverId;
                
                // 填充表扬条例下拉框
                this.populatePraiseRules();
                
                // 设置默认日期为今天
                const today = new Date();
                const dateString = today.toISOString().split('T')[0];
                document.getElementById('praise-date').value = dateString;
                
                // 显示模态框
                showModal('add-praise-modal');
            },
            
            // 填充表扬条例下拉框
            populatePraiseRules() {
                const rules = DataManager.getPraiseRules();
                const select = document.getElementById('praise-rule');
                
                select.innerHTML = '';
                
                if (rules.length === 0) {
                    select.innerHTML = '<option value="">暂无表扬条例</option>';
                    return;
                }
                
                rules.forEach(rule => {
                    const option = document.createElement('option');
                    option.value = rule.id;
                    option.textContent = `${rule.name} (+${rule.score}分)`;
                    option.dataset.score = rule.score;
                    
                    select.appendChild(option);
                });
                
                // 更新加分值
                this.updatePraiseScore();
            },
            
            // 更新表扬加分值
            updatePraiseScore() {
                const select = document.getElementById('praise-rule');
                const scoreInput = document.getElementById('praise-score');
                
                const selectedOption = select.options[select.selectedIndex];
                const score = selectedOption ? selectedOption.dataset.score : '';
                
                scoreInput.value = score;
            },
            
            // 添加表扬记录
            addPraiseRecord() {
                showLoading();
                
                const driverId = document.getElementById('praise-driver-id').value;
                const praiseId = document.getElementById('praise-rule').value;
                const score = parseFloat(document.getElementById('praise-score').value);
                const description = document.getElementById('praise-description').value;
                const date = document.getElementById('praise-date').value;
                
                const recordData = {
                    driverId,
                    praiseId,
                    score,
                    description,
                    date,
                    createdBy: this.currentUser.id
                };
                
                try {
                    // 添加表扬记录
                    DataManager.addPraiseRecord(recordData);
                    showNotification('表扬记录已添加', 'success');
                    
                    // 关闭模态框
                    closeModal('add-praise-modal');
                    
                    // 如果当前在司机详情页，刷新详情
                    if (this.currentDriverId === driverId) {
                        this.showDriverDetail(driverId);
                    }
                    
                    // 刷新仪表盘
                    if (this.currentPage === 'dashboard') {
                        this.renderDashboard();
                    }
                } catch (error) {
                    showNotification(error.message, 'error');
                }
                
                hideLoading();
            },
            
            // 渲染系统设置
            renderSettings() {
                showLoading();
                
                // 只有超级管理员可以查看系统设置
                if (this.currentUser.role !== 'super_admin') {
                    document.getElementById('settings').innerHTML = `
                        <div class="no-data">
                            <i class="fa fa-lock" aria-hidden="true"></i>
                            <p>您没有权限访问此页面</p>
                        </div>
                    `;
                    hideLoading();
                    return;
                }
                
                const settings = DataManager.getSettings();
                
                // 填充表单
                document.getElementById('total-score').value = settings.totalScore || 10;
                document.getElementById('penalty-threshold').value = settings.penaltyThreshold || 8;
                document.getElementById('deposit-amount').value = settings.depositAmount || 500;
                
                hideLoading();
            },
            
            // 保存系统设置
            saveSettings() {
                showLoading();
                
                // 只有超级管理员可以保存系统设置
                if (this.currentUser.role !== 'super_admin') {
                    showNotification('您没有权限执行此操作', 'error');
                    hideLoading();
                    return;
                }
                
                const totalScore = parseInt(document.getElementById('total-score').value);
                const penaltyThreshold = parseInt(document.getElementById('penalty-threshold').value);
                const depositAmount = parseInt(document.getElementById('deposit-amount').value);
                
                const settingsData = {
                    totalScore,
                    penaltyThreshold,
                    depositAmount
                };
                
                try {
                    // 更新系统设置
                    DataManager.updateSettings(settingsData);
                    showNotification('系统设置已保存', 'success');
                    
                    // 更新所有司机的总分和保证金
                    const drivers = DataManager.getDrivers();
                    drivers.forEach(driver => {
                        // 更新总分
                        const updateData = {
                            totalScore: totalScore
                        };
                        
                        // 如果司机评分低于新的处罚阈值，更新保证金为新的金额
                        if (driver.currentScore < penaltyThreshold) {
                            updateData.deposit = depositAmount;
                        }
                        
                        DataManager.updateDriver(driver.id, updateData);
                    });
                    
                    // 重新渲染当前页面
                    this.renderCurrentPage();
                } catch (error) {
                    showNotification(error.message, 'error');
                }
                
                hideLoading();
            },
            
            // 渲染数据报表
            renderDataReport() {
                showLoading();
                
                // 只有超级管理员和有数据报表权限的管理员可以查看
                if (this.currentUser.role !== 'super_admin' && 
                    (!this.currentUser.permissions || !this.currentUser.permissions.includes('data_report'))) {
                    document.getElementById('data-report').innerHTML = `
                        <div class="no-data">
                            <i class="fa fa-lock" aria-hidden="true"></i>
                            <p>您没有权限访问此页面</p>
                        </div>
                    `;
                    hideLoading();
                    return;
                }
                
                // 渲染评分趋势图表
                this.renderScoreTrendChart();
                
                // 渲染违规/表扬统计图表
                this.renderViolationPraiseChart();
                
                // 渲染司机评分排名
                this.renderDriverRanking();
                
                hideLoading();
            },
            
            // 渲染评分趋势图表
            renderScoreTrendChart() {
                const period = document.getElementById('report-period').value;
                const trendData = DataManager.getScoreTrend(period);
                
                const ctx = document.getElementById('score-trend-chart').getContext('2d');
                
                // 销毁旧图表
                if (window.scoreTrendChart) {
                    window.scoreTrendChart.destroy();
                }
                
                // 创建新图表
                window.scoreTrendChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: trendData.dates,
                        datasets: [{
                            label: '平均评分',
                            data: trendData.scores,
                            borderColor: '#1976D2',
                            backgroundColor: 'rgba(25, 118, 210, 0.1)',
                            borderWidth: 2,
                            fill: true,
                            tension: 0.4
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            y: {
                                beginAtZero: false,
                                min: 6,
                                max: 10
                            }
                        }
                    }
                });
            },
            
            // 渲染违规/表扬统计图表
            renderViolationPraiseChart() {
                const period = document.getElementById('report-period').value;
                const statsData = DataManager.getViolationPraiseStats(period);
                
                const ctx = document.getElementById('violation-praise-chart').getContext('2d');
                
                // 销毁旧图表
                if (window.violationPraiseChart) {
                    window.violationPraiseChart.destroy();
                }
                
                // 创建新图表
                window.violationPraiseChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: [
                            ...statsData.violationStats.map(item => item.name),
                            ...statsData.praiseStats.map(item => item.name)
                        ],
                        datasets: [
                            {
                                label: '违规次数',
                                data: statsData.violationStats.map(item => item.count),
                                backgroundColor: '#F44336',
                                borderWidth: 1
                            },
                            {
                                label: '表扬次数',
                                data: statsData.praiseStats.map(item => item.count),
                                backgroundColor: '#4CAF50',
                                borderWidth: 1
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: {
                                    precision: 0
                                }
                            }
                        }
                    }
                });
            },
            
            // 渲染司机评分排名
            renderDriverRanking() {
                const drivers = DataManager.getDriverRanking();
                const tableBody = document.getElementById('driver-ranking-table');
                
                tableBody.innerHTML = '';
                
                if (drivers.length === 0) {
                    tableBody.innerHTML = `
                        <tr>
                            <td colspan="5" class="text-center py-4">暂无司机数据</td>
                        </tr>
                    `;
                    return;
                }
                
                drivers.forEach(driver => {
                    const row = document.createElement('tr');
                    
                    row.innerHTML = `
                        <td>${driver.rank}</td>
                        <td>${driver.name}</td>
                        <td>
                            <div class="flex items-center">
                                <span class="mr-2">${driver.currentScore}</span>
                                <div class="rating-stars">
                                    ${generateStars(driver.currentScore, driver.totalScore)}
                                </div>
                            </div>
                        </td>
                        <td>${driver.violationCount}</td>
                        <td>${driver.praiseCount}</td>
                    `;
                    
                    tableBody.appendChild(row);
                });
            },
            
            // 生成报表
            generateReport() {
                showLoading();
                
                // 获取报表周期
                const period = document.getElementById('report-period').value;
                
                // 更新图表
                this.renderScoreTrendChart();
                this.renderViolationPraiseChart();
                
                showNotification('报表已生成', 'success');
                hideLoading();
            },
            
            // 导出报表
            exportReport() {
                showLoading();
                
                // 模拟导出功能
                setTimeout(() => {
                    showNotification('报表导出功能正在开发中', 'info');
                    hideLoading();
                }, 1000);
            },
            
            // 显示删除确认
            showDeleteConfirm(message, confirmCallback) {
                const modal = document.getElementById('confirm-delete-modal');
                const messageElement = document.getElementById('delete-confirm-message');
                const confirmBtn = document.getElementById('confirm-delete-btn');
                
                messageElement.textContent = message;
                
                // 移除之前的事件监听
                const newConfirmBtn = confirmBtn.cloneNode(true);
                confirmBtn.parentNode.replaceChild(newConfirmBtn, confirmBtn);
                
                newConfirmBtn.addEventListener('click', () => {
                    confirmCallback();
                    closeModal('confirm-delete-modal');
                });
                
                showModal('confirm-delete-modal');
            },
            
            // 显示项目删除确认
            showItemDeleteConfirm(type, id) {
                // 设置删除确认信息
                let deleteMessage = '';
                
                switch (type) {
                    case 'driver':
                        const driver = DataManager.getDriver(id);
                        deleteMessage = `您确定要删除司机"${driver ? driver.name : '未知'}"吗？此操作将删除该司机的所有记录。`;
                        break;
                    case 'violationRule':
                        const violationRule = DataManager.getViolationRule(id);
                        deleteMessage = `您确定要删除违规条例"${violationRule ? violationRule.name : '未知'}"吗？`;
                        break;
                    case 'praiseRule':
                        const praiseRule = DataManager.getPraiseRule(id);
                        deleteMessage = `您确定要删除表扬条例"${praiseRule ? praiseRule.name : '未知'}"吗？`;
                        break;
                    case 'user':
                        const user = DataManager.getUser(id);
                        deleteMessage = `您确定要删除用户"${user ? user.username : '未知'}"吗？`;
                        break;
                    default:
                        deleteMessage = '您确定要删除此记录吗？此操作不可撤销。';
                }
                
                this.showDeleteConfirm(deleteMessage, () => this.deleteItem(type, id));
            },
            
            // 确认删除
            deleteItem(type, id) {
                showLoading();
                
                try {
                    let success = false;
                    
                    switch (type) {
                        case 'driver':
                            success = DataManager.deleteDriver(id);
                            break;
                        case 'violationRule':
                            success = DataManager.deleteViolationRule(id);
                            break;
                        case 'praiseRule':
                            success = DataManager.deletePraiseRule(id);
                            break;
                        case 'user':
                            success = DataManager.deleteUser(id);
                            break;
                    }
                    
                    if (success) {
                        showNotification('删除成功', 'success');
                        
                        // 关闭模态框
                        closeModal('confirm-delete-modal');
                        
                        // 重新渲染当前页面
                        this.renderCurrentPage();
                    } else {
                        showNotification('删除失败', 'error');
                    }
                } catch (error) {
                    showNotification(error.message, 'error');
                }
                
                hideLoading();
            }
        };

        // 初始化应用
        document.addEventListener('DOMContentLoaded', () => {
            AppController.init();
        });
    </script>


</body></html>